react-duallist

A React based searchable, sortable and fully customizable dual list.

Demo

Install

npm install react-duallist --save

or

yarn add react-duallist

Use

import Duallist from 'react-duallist';

import 'react-duallist/lib/react_duallist.[css|less|scss|sass]'

  <Duallist
    available={available}
    selected={selected}
    onSelect={this.onSelect}
  />

options

Option	Description	Default Value	Required
available	List of available options, will appear in the left box		true
selected	List of selected options, will appear in the right box		true, atleast need to pass an empty array
onSelect	A callback to handle the change in the selected list		true
leftLabel	A header for the left (available) list	Available
rightLabel	A header for the right (selected) list	Selected
sortable	A false value will hide the reorder buttons on the right	true
searchable	A false value will hide the search field on the top	true
moveLeftIcon	fontawesome icons or icon of your choice	<
moveAllLeftIcon	fontawesome icons or icon of your choice	<<
moveRightIcon	fontawesome icons or icon of your choice	>
moveAllRightIcon	fontawesome icons or icon of your choice	>>
moveUpIcon	fontawesome icons or icon of your choice	￪
moveTopIcon	fontawesome icons or icon of your choice	⇈
moveDownIcon	fontawesome icons or icon of your choice	￬
moveBottomIcon	fontawesome icons or icon of your choice	⇊

Tests

npm test

or yarn test

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

• 0.0.1 - Duallist implementations
• 0.0.2 - Support sorting on the 'selected' list
• 0.0.3 - Hide/show search bar
• 0.0.4 - Add example page
• 0.0.5 - Add Custom icon support
• 1.0.0 - Support React 16
• 1.1.0 - Some style changes
• 1.1.1 - Rename lib directory
• 1.1.2 - Handle when empty arrays are passed
• 1.1.4 - OnSelect handlers for the left and right lists.
• 1.1.5 - [Fix for issue #1] Allow empty 'selected' array