React-dn-select NPM

react-dn-select

Supports both single and multi selection
Works with responsive layouts
Select box and items can be freely styled
Uses modern React components with hooks

Install

npm install react-dn-select

Use

import { useState } from 'react';
import { DnSelect } from 'react-dn-select';

function App() {
  // items can be either primitives or objects
  const [items, setItems] = useState(['Foo', 'Bar', 'Baz', '...']);

  return (
    <div className="App">
      <DnSelect
        items={items}
        itemId={(item) => item.toLowerCase()}
        renderItem={({ item }) => <p>{item}</p>}
      />
    </div>
  );
}

Props

Required

Name	Description	Default	Example value
items	The items to be selected	`undefined`	`['Foo', 'Bar', 'Baz']`
itemId	Function to get each item's id	`undefined`	`(item) => item.toLowerCase()`
renderItem	Function to render each item	`undefined`	`({ item, isSelected }) => <p>{item}</p>`

Optional

Name	Description	Default	Example value
initSelected	Preselected items on initial mount	`[]`	`['Bar', 'Baz']`
multi	Allows multi-select when true	`false`	`true`
onDragStart	Function to react to selection start	`undefined`	`(prevSelection) => {}`
onDragMove	Function to react to selection move	`undefined`	`(currSelection) => {}`
onDragEnd	Function to react to selection end	`undefined`	`(finalSelection) => {}`
escapable	Stops selection on Escape key press	`true`	`false`
onEscape	Function to fire when escaped	`undefined`	`() => {}`
throttleDelay	Prevents rapid rerenders from pointermove	`100`	`150`
dragThreshold	Pixels to drag before drawing the select box	`1`	`4`