Skip to main content

useCheckList

Provides a hook - checked related control to use in the checklist.

function useCheckList<T extends Item>(
initialItems: T[]
): {
list: T[];
set: (items: T[]) => void;
// type IdType = T['id'];
isChecked: (id: IdType) => boolean | undefined;
isAllChecked: () => boolean;
check: (id: IdType) => void;
unCheck: (id: IdType) => void;
toggle: (id: IdType) => void;
updateItem: (id: IdType, checked: boolean) => void;
toggleAll: () => void;
checkAll: () => void;
unCheckAll: () => void;
updateAll: (checked: boolean) => void;
getCheckedList: () => T[];
getCheckedIds: () => (string | number)[];
};

Example

const { list, isChecked, toggle, toggleAll, checkAll, getCheckedIds } = useCheckList(shopList);

useEffect(() => {
checkAll();
}, [checkAll]);

Warning

If there are many items in the list, perf may drop.