react-draggable-select v0.1.3

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

useSelection custom hook

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} />