React-draggable-select

Features

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

Installation

npm install react-draggable-select

Usage

1import { DragSelect, useSelection } from "react-draggable-select";
2
3function App() {
4  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Ensure to use an array with unique values.
5
6  const { selectionContext, isSelected, setRef } = useSelection();
7
8  return (
9    <div>
10      <DragSelect selectionContext={selectionContext} // Required: This prop is necessary to function correctly.
11      />
12      <div>
13        {items.map((v, i) => (
14          <div
15            key={i}
16            data-id={v} // Required: Must be a number; it will be included in the selection result array.
17            ref={setRef} // Required: Pass this ref to all selectable elements to enable proper selection tracking.
18            className={`${isSelected(v) ? "selected" : ""}`}
19          >
20            {v}
21          </div>
22        ))}
23      </div>
24    </div>
25  );
26}

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.

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

or pass a custom class name to draggedSectionClassName:

1 <DragSelect draggedSectionClassName={customClassName} />