useMultiSelect

A React Hook that manages multi-select state.

Demo

Source

Choose your favorite fruits

All selected:
false
Partially selected:
false
None selected:
true
Is Melon selected:
false
Selected:

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>]