react-selectable-box

react-selectable-box

A React component that allows you to select elements in the drag area using the mouse

Changelog · Report Bug · Request Feature

Introduction

A React component that allows you to select elements in the drag area using the mouse

Usage

Install

npm i react-selectable-box
// or
yarn add react-selectable-box
// or
pnpm add react-selectable-box

Docs

docs

Example

import Selectable, { useSelectable } from 'react-selectable-box';

const list: number[] = [];
for (let i = 0; i < 200; i++) {
  list.push(i);
}

const App = () => {
  return (
    <Selectable>
      <div
        style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 20,
          padding: 20,
          border: '1px solid #ccc',
        }}
      >
        {list.map((i) => (
          <Item key={i} value={i} />
        ))}
      </div>
    </Selectable>
  );
};

const Item = ({ value }: { value: number }) => {
  const { setNodeRef, isSelected, isAdding } = useSelectable({
    value,
  });

  return (
    <div
      ref={setNodeRef}
      style={{
        width: 50,
        height: 50,
        borderRadius: 4,
        border: isAdding ? '1px solid #1677ff' : undefined,
        background: isSelected ? '#1677ff' : '#ccc',
      }}
    />
  );
};

Buy me a coffee