Select Items Based On Array – useSelectedItems

Category: Others , React
Author:LauraBeatris
Views Total:10 views
Official Page:Go to website
Publish Date:August 25, 2020
License:MIT

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:

Select Items Based On Array - useSelectedItems

You Might Be Interested In:

Leave a Reply