Skip to content

jyotirmaybanerjee/react-duallist

Repository files navigation

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