use-multi-select 🎯

A lightweight, type-safe React hook for handling complex multi-select logic (including Shift-Click range selection). Zero dependencies, built for modern React.

If this hook saved you a headache, consider supporting me: 0x494f133fbdf203bfc009d4d926d78eec02195855f19e15315abceb60a9c29ef3- APTOS chain, USDT

Installation

npm install use-multi-select-hook

Use Example:

import { useMultiSelect } from 'use-multi-select-hook';

const data = ['item-1', 'item-2', 'item-3'];

function App() {
  const { selectedIds, toggleItem, isSelected, selectAll, clearAll } = useMultiSelect(data);

  return (
    <ul>
      {data.map(id => (
        <li 
          key={id}
          style={{ background: isSelected(id) ? 'lightblue' : 'transparent' }}
          onClick={(e) => toggleItem(id, e.shiftKey)}
        >
          {id}
        </li>
      ))}
    </ul>
  );
}

Features

• 🚀 Shift-Click Support: Select large ranges of items instantly.
• 🛡️ Fully Type-Safe: Written in TypeScript with generics <T>.
• ⚡ Performance Optimized: Uses Set under the hood for instant lookups.