Select Items Based On Array – useSelectedItems

useSelectedItems is a React hook to easily select items based on an array.

Install & Import:

# Yarn
$ yarn add use-selected-items-hook

# NPM
$ npm i use-selected-items-hook --save

import 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>
       );
    })
 }
)

Preview:

Download Details:

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