@react-stately/selection

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>
  );
}