react-multiselect-two-sides
React multiselect two sides component
Demo: vovanr.github.io/react-multiselect-two-sides
Install
npm install --save react-multiselect-two-sides
Usage
See: example
Component { superprops; thisstate = 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 ; } { this; } { const options value = thisstate; const selectedCount = valuelength; const availableCount = optionslength - selectedCount; return <MultiselectTwoSides ...thisstate className="msts_theme_example" onChange=thishandleChange availableHeader="Available" availableFooter=`Available: ` selectedHeader="Selected" selectedFooter=`Selected: ` labelKey="name" showControls searchable /> ; } ReactDOM;
Api
MultiselectTwoSidespropTypes = availableFooter: PropTypesnode availableHeader: PropTypesnode className: PropTypesstring clearFilterText: PropTypesstring clearable: PropTypesbool deselectAllText: PropTypesstring disabled: PropTypesbool filterBy: PropTypesfunc filterComponent: PropTypesfunc highlight: PropTypesarray labelKey: PropTypesstring limit: PropTypesnumber onChange: PropTypesfunc options: PropTypesarray placeholder: PropTypesstring searchable: PropTypesbool selectAllText: PropTypesstring selectedFooter: PropTypesnode selectedHeader: PropTypesnode showControls: PropTypesbool value: PropTypesarray valueKey: PropTypesstring; MultiselectTwoSidesdefaultProps = availableFooter: null availableHeader: null className: null clearFilterText: 'Clear' clearable: true deselectAllText: 'Deselect all' disabled: false // Case-insensitive filter optionlabelKey > -1 filterComponent: null highlight: labelKey: 'label' limit: undefined {} options: placeholder: '' searchable: false selectAllText: 'Select all' selectedFooter: null selectedHeader: null showControls: false value: valueKey: 'value';
License
MIT © Vladimir Rodkin