@react-stately/selection

What is @react-stately/selection?

@react-stately/selection is a library that provides state management for selection in React applications. It is part of the React Spectrum collection of libraries and is designed to handle selection logic for lists, tables, and other components that require selection functionality.

What are @react-stately/selection's main functionalities?

Single Selection

This feature allows you to manage single selection state in a list. The code sample demonstrates how to use the `useSingleSelectListState` hook to manage the selection state of a list of items.

import { useSingleSelectListState } from '@react-stately/selection';

function SingleSelectList(props) {
  let state = useSingleSelectListState(props);

  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.key} onClick={() => state.setSelectedKey(item.key)}>
          {item.name} {state.selectedKey === item.key && '(Selected)'}
        </li>
      ))}
    </ul>
  );
}

Multiple Selection

This feature allows you to manage multiple selection states in a list. The code sample demonstrates how to use the `useMultipleSelectionState` hook to manage the selection state of a list of items, allowing multiple items to be selected.

import { useMultipleSelectionState } from '@react-stately/selection';

function MultipleSelectList(props) {
  let state = useMultipleSelectionState(props);

  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.key} onClick={() => state.toggleSelection(item.key)}>
          {item.name} {state.selectedKeys.has(item.key) && '(Selected)'}
        </li>
      ))}
    </ul>
  );
}

Selection Management

This feature provides a selection manager to handle complex selection logic. The code sample demonstrates how to use the `useSelectionManager` hook to manage selection actions like selecting all items, clearing selection, and toggling selection for individual items.

import { useSelectionManager } from '@react-stately/selection';

function SelectionManagerExample(props) {
  let manager = useSelectionManager(props.selectionState);

  return (
    <div>
      <button onClick={() => manager.selectAll()}>Select All</button>
      <button onClick={() => manager.clearSelection()}>Clear Selection</button>
      <ul>
        {props.items.map((item) => (
          <li key={item.key} onClick={() => manager.toggleSelection(item.key)}>
            {item.name} {manager.isSelected(item.key) && '(Selected)'}
          </li>
        ))}
      </ul>
    </div>
  );
}

Other packages similar to @react-stately/selection

react-select

react-select is a flexible and customizable library for building dropdowns and multi-select components in React. It provides a wide range of features for handling single and multiple selections, custom rendering, and more. Compared to @react-stately/selection, react-select is more focused on dropdown and select input components, while @react-stately/selection provides more general selection state management.

downshift

downshift is a library that provides primitives to build flexible and accessible autocomplete, combobox, dropdown, and menu components in React. It offers hooks and utilities to manage selection state and user interactions. Compared to @react-stately/selection, downshift is more focused on building custom input components with complex interactions, while @react-stately/selection is more focused on general selection state management.

react-multi-select-component

react-multi-select-component is a simple and lightweight library for creating multi-select dropdowns in React. It provides an easy-to-use API for managing multiple selections. Compared to @react-stately/selection, react-multi-select-component is more specialized for multi-select dropdowns, while @react-stately/selection offers a broader range of selection state management capabilities.

README

@react-stately/selection

This package is part of react-spectrum. See the repo for more details.