TanStack Select

To run the basic Solid implementation example locally, follow these steps in your terminal:

1. Install the project dependencies using npm install.
2. Start the development server using npm run dev.

To use TanStack Select in a Solid application, install the @tanstack/solid-select package. This package is compatible with Solid v1.9.5 or higher.

npm install @tanstack/solid-select

To use TanStack Select in a React application, install the @tanstack/react-select package. This package is compatible with React v16.8 or higher.

npm install @tanstack/react-select

To run the basic React example provided in this repository, use the following commands to install dependencies and start the development server:

npm install
npm run dev

To use TanStack Select in a React application, install the @tanstack/react-select package via npm.

npm install @tanstack/react-select

Install the package corresponding to your framework. Use @tanstack/react-select for React applications, or @tanstack/select for vanilla JavaScript implementations.

# For React
npm install @tanstack/react-select

# For Vanilla JS
npm install @tanstack/select

# Npm
npm install @tanstack/react-select
npm install @tanstack/select # no framework, just vanilla js

To use TanStack Select in a Vanilla JS environment or with a framework not explicitly supported by a dedicated package, install the core @tanstack/select package. Note that the framework-specific packages (@tanstack/react-select and @tanstack/solid-select) also re-export everything from this core package.

npm install @tanstack/select

The @tanstack/solid-select package provides the SolidJS implementation of TanStack Select. It re-exports all core logic from @tanstack/select, allowing you to use the headless selection logic within SolidJS applications.

To use the library, import the hooks or components directly from @tanstack/solid-select. Note that hooks should be imported individually rather than through barrel files to ensure optimal tree-shaking and compatibility with Solid's reactivity system.

import { useSelect } from '@tanstack/solid-select'

// Use the hook within a Solid component
const MyComponent = () => {
  const select = useSelect({ 
    // options from @tanstack/select
  })
  
  return (
    // Your Solid implementation
  )
}

The @tanstack/react-select package provides the React implementation of TanStack Select. It re-exports all core functionality from @tanstack/select, allowing you to use the headless select logic within React components.

Note on Imports: To ensure optimal tree-shaking and avoid issues with barrel files, it is recommended to import hooks individually rather than from a single entry point if the package structure allows.

import { useSelect } from '@tanstack/react-select';

// Use the hook within your React component
function MyComponent() {
  const select = useSelect({
    // options from @tanstack/select
  });

  return <div>{/* Render your select UI using select state */}</div>;
}

The select variable is a constant string literal used within the TanStack Select ecosystem, typically for identifying the select type or within internal type-checking mechanisms. It is defined as the literal value 'select'.

const select: "select" = 'select';

The @tanstack/select package exports a constant select with the string value 'select'. This is likely used as a type identifier or a key within the TanStack ecosystem to distinguish select-related logic or state.

import { select } from '@tanstack/select'

console.log(select) // 'select'