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

See demo app

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 |

Development

A minimal dev page can be found in the example directory. Execute npm run dev to run the demo page.