useMultiSelect

一个管理多选状态的 React 钩子。

演示

源码

Choose your favorite fruits

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

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

const [state, actions] = useMultiSelect(list, defaultSelected)

列表 List

要管理多选状态的项目列表。

默认选中 DefaultSelected

默认选中的项目列表。

返回值

export interface UseMultiSelectReturnsState<T> {
  /**
   * 选中的项目
   */
  selected: T[]
  /**
   * 是否没有选中任何项目
   */
  isNoneSelected: boolean
  /**
   * 是否所有项目都被选中
   */
  isAllSelected: boolean
  /**
   * 是否部分选中
   */
  isPartiallySelected: boolean
}

export interface UseMultiSelectActions<T> {
  /**
   * 检查项目是否被选中
   */
  isItemSelected: (item: T) => boolean
  /**
   * 设置选中的项目
   */
  setSelected: ReactSetState<T[]>
  /**
   * 选中项目
   */
  select: (item: T) => void
  /**
   * 选中所有项目
   */
  selectAll(): void
  /**
   * 取消选中项目
   *
   * @deprecated 请使用 `unselectAll` 代替
   */
  unSelect: (item: T) => void
  /**
   * 取消选中所有项目
   *
   * @deprecated 请使用 `unselectAll` 代替
   */
  unSelectAll(): void
  /**
   * 取消选中项目
   */
  unselect: (item: T) => void
  /**
   * 取消选中所有项目
   */
  unselectAll(): void
  /**
   * 切换项目的选中状态
   */
  toggle: (item: T) => void
  /**
   * 切换所有项目的选中状态
   */
  toggleAll(): void
}

export type UseMultiSelectReturns<T> = readonly [UseMultiSelectReturnsState<T>, UseMultiSelectActions<T>]