A React based searchable, sortable and fully customizable dual list.
npm install react-duallist --save
or
yarn add react-duallist
import Duallist from 'react-duallist';
import 'react-duallist/lib/react_duallist.[css|less|scss|sass]'
<Duallist
available={available}
selected={selected}
onSelect={this.onSelect}
/>| 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 | ⇊ |
npm test
or yarn test
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.
- 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