React multiselect two sides component
Demo: vovanr.github.io/react-multiselect-two-sides
npm install --save react-multiselect-two-sides
See: example
const App = React.createClass({
getInitialState() {
return {
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 (
<MultiselectTwoSides
{...this.state}
className="msts_theme_example"
onChange={this.handleChange}
availableHeader="Available"
availableFooter={`Available: ${availableCount}`}
selectedHeader="Selected"
selectedFooter={`Selected: ${selectedCount}`}
showControls
searchable
/>
);
}
});
ReactDOM.render(<App/>, document.getElementById('app'));
MultiselectTwoSides.propTypes = {
availableFooter: React.PropTypes.node,
availableHeader: React.PropTypes.node,
className: React.PropTypes.string,
clearFilterText: React.PropTypes.string,
clearable: React.PropTypes.bool,
deselectAllText: React.PropTypes.string,
disabled: React.PropTypes.bool,
filterComponent: React.PropTypes.func,
highlight: React.PropTypes.array,
labelKey: React.PropTypes.string,
limit: React.PropTypes.number,
onChange: React.PropTypes.func,
options: React.PropTypes.array,
placeholder: React.PropTypes.string,
searchable: React.PropTypes.bool,
selectAllText: React.PropTypes.string,
selectedFooter: React.PropTypes.node,
selectedHeader: React.PropTypes.node,
showControls: React.PropTypes.bool,
value: React.PropTypes.array,
valueKey: React.PropTypes.string
};
MultiselectTwoSides.defaultProps = {
clearFilterText: 'Clear',
clearable: true,
deselectAllText: 'Deselect all',
disabled: false,
highlight: [],
labelKey: 'label',
options: [],
searchable: false,
selectAllText: 'Select all',
showControls: false,
value: [],
valueKey: 'value'
};
MIT © Vladimir Rodkin