@react-stately/select

Basic Select State Management

This feature allows you to manage the state of a select component, including the list of items and the currently selected item.

import { useSelectState } from '@react-stately/select';

const state = useSelectState({
  items: [
    { key: 'red', name: 'Red' },
    { key: 'green', name: 'Green' },
    { key: 'blue', name: 'Blue' }
  ],
  selectedKey: 'red'
});

console.log(state.selectedKey); // 'red'

Handling Selection Changes

This feature allows you to handle changes in the selection state, providing a callback function that is called whenever the selected item changes.

import { useSelectState } from '@react-stately/select';

const state = useSelectState({
  items: [
    { key: 'red', name: 'Red' },
    { key: 'green', name: 'Green' },
    { key: 'blue', name: 'Blue' }
  ],
  selectedKey: 'red',
  onSelectionChange: (key) => console.log('Selected:', key)
});

state.setSelectedKey('green'); // Logs: 'Selected: green'

Multiple Selection

This feature allows you to manage multiple selections within a select component, including handling changes to the set of selected items.

import { useSelectState } from '@react-stately/select';

const state = useSelectState({
  items: [
    { key: 'red', name: 'Red' },
    { key: 'green', name: 'Green' },
    { key: 'blue', name: 'Blue' }
  ],
  selectedKeys: new Set(['red']),
  selectionMode: 'multiple',
  onSelectionChange: (keys) => console.log('Selected keys:', keys)
});

state.setSelectedKeys(new Set(['green', 'blue'])); // Logs: 'Selected keys: Set { 'green', 'blue' }'