React multiselect two sides component
npm install react-multiselect-two-sides[![Commitizen friendly][commitizen-image]][commitizen-url]
[![XO code style][codestyle-image]][codestyle-url]
[![NPM version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Dependency Status][depstat-image]][depstat-url]
[![DevDependency Status][depstat-dev-image]][depstat-dev-url]
> React multiselect two sides component
Demo: [vovanr.github.io/react-multiselect-two-sides][demo]
``shell`
npm install --save react-multiselect-two-sides
`js
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
options: [
{name: 'Foo', value: 0},
{name: 'Bar', value: 1},
{name: 'Baz', value: 2, disabled: true},
{name: 'Qux', value: 3},
{name: 'Quux', value: 4},
{name: 'Corge', value: 5},
{name: 'Grault', value: 6},
{name: 'Garply', value: 7},
{name: 'Waldo', value: 8},
{name: 'Fred', value: 9},
{name: 'Plugh', value: 10},
{name: 'Xyzzy', value: 11},
{name: 'Thud', value: 12}
],
value: [0, 3, 9]
};
},
handleChange = (value) => {
this.setState({value});
}
render() {
const {options, value} = this.state;
const selectedCount = value.length;
const availableCount = options.length - selectedCount;
return (
className="msts_theme_example"
onChange={this.handleChange}
availableHeader="Available"
availableFooter={Available: ${availableCount}}Selected: ${selectedCount}
selectedHeader="Selected"
selectedFooter={}
labelKey="name"
showControls
searchable
/>
);
}
}
ReactDOM.render(
`
`js
MultiselectTwoSides.propTypes = {
availableFooter: PropTypes.node,
availableHeader: PropTypes.node,
className: PropTypes.string,
clearFilterText: PropTypes.string,
clearable: PropTypes.bool,
deselectAllText: PropTypes.string,
disabled: PropTypes.bool,
filterBy: PropTypes.func,
filterComponent: PropTypes.func,
highlight: PropTypes.array,
labelKey: PropTypes.string,
limit: PropTypes.number,
onChange: PropTypes.func,
options: PropTypes.array,
placeholder: PropTypes.string,
searchable: PropTypes.bool,
selectAllText: PropTypes.string,
selectedFooter: PropTypes.node,
selectedHeader: PropTypes.node,
showControls: PropTypes.bool,
value: PropTypes.array,
valueKey: PropTypes.string
};
MultiselectTwoSides.defaultProps = {
availableFooter: null,
availableHeader: null,
className: null,
clearFilterText: 'Clear',
clearable: true,
deselectAllText: 'Deselect all',
disabled: false,
// Case-insensitive filter
filterBy: (option, filter, labelKey) => option[labelKey].toLowerCase().indexOf(filter.toLowerCase()) > -1,
filterComponent: null,
highlight: [],
labelKey: 'label',
limit: undefined,
onChange: () => {},
options: [],
placeholder: '',
searchable: false,
selectAllText: 'Select all',
selectedFooter: null,
selectedHeader: null,
showControls: false,
value: [],
valueKey: 'value'
};
``
[demo]: https://vovanr.github.io/react-multiselect-two-sides
[commitizen-url]: https://commitizen.github.io/cz-cli/
[commitizen-image]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square
[codestyle-url]: https://github.com/sindresorhus/xo
[codestyle-image]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg?style=flat-square
[npm-url]: https://npmjs.org/package/react-multiselect-two-sides
[npm-image]: https://img.shields.io/npm/v/react-multiselect-two-sides.svg?style=flat-square
[travis-url]: https://travis-ci.org/VovanR/react-multiselect-two-sides
[travis-image]: https://img.shields.io/travis/VovanR/react-multiselect-two-sides.svg?style=flat-square
[depstat-url]: https://david-dm.org/VovanR/react-multiselect-two-sides
[depstat-image]: https://david-dm.org/VovanR/react-multiselect-two-sides.svg?style=flat-square
[depstat-dev-url]: https://david-dm.org/VovanR/react-multiselect-two-sides
[depstat-dev-image]: https://david-dm.org/VovanR/react-multiselect-two-sides/dev-status.svg?style=flat-square