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