Skip to main content
Version: 5.7.2

useMultiSelectableList

About​

A custom hook to easily select multiple values from a list

Installation​

npm install --save rooks

Importing the hook​

import { useMultiSelectableList } from "rooks";

Usage​

function Demo() {
const [
selection,
{ matchSelection, toggleSelection, updateSelections }
] = useMultiSelectableList(items, [0, 1]);

return null;
}

render(<Demo />);

Arguments​

Argument valueTypeDescriptionDefault value
listArrayA list of items of any type[]
initialSelectIndicesArray<number>An array of indices that are selected initially[0]
allowUnselectedBooleanWhether to allow unselect when update selectionsfalse

Returns​

Returns an array of following items:

Return valueTypeDescription
selectionArrayThe first item is an array of selected indices, the second item is the selected values
methodsObjectObject with methods to control the selectable list, see the table below

Methods:

MethodsTypeDescription
matchSelection({ index?: number, value?: T }) => booleanreturns true if the item is selected
toggleSelection({ index?: number, value?: T }) => () => voidreturns a function to toggle an item by index or value
updateSelections({ indices?: number[], values?: T[] }) => () => voidreturns a function to update specified items

Codesandbox Examples​

Basic Usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.