react-use-swap
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

React useSwap Swapable List Hooks

Installation

  • From npm registry
npm i react-use-swap
  • From Github ( will have more recentbut unstable updates)
npm i https://github.com/Badalmishra/useSwap.git

Features

  • The use gives stateful list of selected and unselected items with a method to swap items between lists
  • Prop to add preselected list

Demo

See Demo on Sandbox

SwapContainer.js

  • usage of useSwap hook
import React from "react";
import useSwap from "react-use-swap";
import ListItem from "./ListItem";

const SwapContainer = () => {
  const allItems = [
    {
      ID: "1",
      icon: "😂"
    },
    {
      ID: "2",
      icon: "😎"
    },
    {
      ID: "3",
      icon: "🤦"
    },
    {
      ID: "4",
      icon: "😱"
    },
    {
      ID: "5",
      icon: "🤷"
    },
    {
      ID: "6",
      icon: "😢"
    },
    {
      ID: "7",
      icon: "🤔"
    }
  ];
  const { selectedItems, unSeletedItems, swap } = useSwap(
    allItems,
    allItems.slice(0, 2),
    "ID"
  );
  return (
    <div className={"container"}>
      <div className="list">
        <small>All ( Toggle )</small>
        <hr />
        {allItems.map((e) => (
          <ListItem
            title="Click to toggle swap"
            key={e.ID}
            primaryKey="ID"
            swap={swap}
            item={e}
          />
        ))}
      </div>
      <div className="list">
        <small>Un Selected ( + select)</small>
        <hr />
        {unSeletedItems.map((e) => (
          <ListItem
            title="Click to select"
            key={e.ID}
            primaryKey="ID"
            swap={swap}
            item={e}
          />
        ))}
      </div>
      <div className="list">
        <small>Selected ( - unselect)</small>
        <hr />
        {selectedItems.map((e) => (
          <ListItem
            title="click to unselect"
            key={e.ID}
            primaryKey="ID"
            swap={swap}
            item={e}
          />
        ))}
      </div>
    </div>
  );
};

export default SwapContainer;

ListItem.js

  • using the swap method
import React from "react";

const ListItem = ({ item, swap, title, primaryKey }) => {
  const handleClick = () => {
    swap(item[primaryKey]);
  };
  return (
    <div onClick={handleClick} title={title} className={"listItem"}>
      {item.icon}
    </div>
  );
};

export default ListItem;

Output

Output with console logs

Readme

Keywords

none

Package Sidebar

Install

npm i react-use-swap

Weekly Downloads

1

Version

0.0.5

License

none

Unpacked Size

10.1 kB

Total Files

12

Last publish

Collaborators

  • badalmishra