useMultiSelect
A React Hook that manages multi-select state.
Demo
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const [state, actions] = useMultiSelect(list, defaultSelected)
List
A list of items to manage multi-select state.
DefaultSelected
A list of items that are selected by default.
Returns
export interface UseMultiSelectReturnsState<T> {
  /**
   * The selected items
   */
  selected: T[]
  /**
   * Whether none of the items are selected
   */
  isNoneSelected: boolean
  /**
   * Whether all of the items are selected
   */
  isAllSelected: boolean
  /**
   * Whether some of the items are selected
   */
  isPartiallySelected: boolean
}
export interface UseMultiSelectActions<T> {
  /**
   * Whether the item is selected
   */
  isItemSelected: (item: T) => boolean
  /**
   * Set the selected items
   */
  setSelected: ReactSetState<T[]>
  /**
   * Select the item
   */
  select: (item: T) => void
  /**
   * Select all items
   */
  selectAll(): void
  /**
   * Unselect the item
   *
   * @deprecated Use `unselect` instead
   */
  unSelect: (item: T) => void
  /**
   * Unselect all items
   *
   * @deprecated Use `unselectAll` instead
   */
  unSelectAll(): void
  /**
   * Unselect the item
   */
  unselect: (item: T) => void
  /**
   * Unselect all items
   */
  unselectAll(): void
  /**
   * Toggle the item
   */
  toggle: (item: T) => void
  /**
   * Toggle all items
   */
  toggleAll(): void
}
export type UseMultiSelectReturns<T> = readonly [UseMultiSelectReturnsState<T>, UseMultiSelectActions<T>]