react-dn-select
TypeScript icon, indicating that this package has built-in type declarations

1.2.2 • Public • Published


react-dn-select NPM Version

  • 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.

Package Sidebar

Install

npm i react-dn-select

Weekly Downloads

0

Version

1.2.2

License

MIT

Unpacked Size

64.5 kB

Total Files

17

Last publish

Collaborators

  • istocode