React-draggable-select

Features

• Select items by dragging or clicking
• Supports mobile
• Supports SSR
• Customizable styling

Installation

npm install react-draggable-select

Usage

import { DragSelect, useSelection } from "react-draggable-select";

function App() {
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Ensure to use an array with unique values.

  const { selectionContext, isSelected, setRef } = useSelection();

  return (
    <div>
      <DragSelect selectionContext={selectionContext} // Required: This prop is necessary to function correctly.
      />
      <div>
        {items.map((v, i) => (
          <div
            key={i}
            data-id={v} // Required: Must be a number; it will be included in the selection result array.
            ref={setRef} // Required: Pass this ref to all selectable elements to enable proper selection tracking.
            className={`${isSelected(v) ? "selected" : ""}`}
          >
            {v}
          </div>
        ))}
      </div>
    </div>
  );
}

Note: No default styles are provided for selected items. Please specify custom styles to enhance visibility.

API Reference

DragSelect Components Props

| Prop Name | Type | Required | Description | |-----------------------------|-----------------------|----------|--------------------------------------------------------| | selectionContext | object | O | Necessary for the DragSelect component to function correctly. | | draggedSectionClassName | string | x | Class name for the dragged section. | | onSelectionComplete | (selected: number) => void | x | Callback fired when selection is complete. |

useSelection custom hook

| return Value | Type | Description | |-----------------------------|-----------------------|--------------------------------------------------------| | selectionContext | object | Necessary for the DragSelect component to function correctly. | | isSelected | (value: number) => boolean | Function to check if an item is selected. | | selectedItems | number[] | Array of currently selected items (from data-id values). | | setRef | (el: HTMLElement \| null) => void | Function to set a ref for selectable item. |

Styling

You can customize the styling of the dragged section using either plain CSS or a custom class name.

Example

You can override the default style using CSS.

.ds-dragged-section {
  background-color: #8989f180;
}

or pass a custom class name to draggedSectionClassName:

 <DragSelect draggedSectionClassName={customClassName} />