useSelectedItems is a React hook to easily select items based on an array.
# Yarn
$ yarn add use-selected-items-hook
# NPM
$ npm i use-selected-items-hook --saveimport useSelectedItems from "use-selected-items-hook";
Basic Usage:
const [
selectedItems,
listItems,
{ toggleItem },
] = useSelectedItems<ItemType>({
itemIdentifier: "id",
items,
});
const handleClick = (item) => () => {
toggleItem(item);
};
return (
{
listItems.map((item) => {
// You're able to apply a specify style to a selected item
const itemClasses = classNames("cursor-pointer border-white border-solid", {
"border-black": item.selected,
});
return (
<div
key={item.id}
className={itemClasses}
onClick={handleClick(item)}
>
<p>
{item.name}
</p>
</div>
);
})
}
)
Author: LauraBeatris
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/LauraBeatris/use-selected-items-hook
License: MIT