react-selector-multiple
Installation
npm install --save react-selector-multiple
This library using react hooks. Note that to enable Hooks, all React packages need to be 16.8.0 or higher.
Prop Types
Prop | Type | Description |
---|---|---|
options | arrayOf(object / string) | all option you want to show, if you want array of objects, the object should look like this {value: string / object, name: string} |
selectedValues | arrayOf(object / string) | need to set here the selected values, if the option is array of objects you get the value |
onChange | func | event that return the selected, also here if the option is array of objects you get the value |
style | oneOfType(object, array) | set different style to select tag |
selectedOptionStyle | oneOfType(object, array) | set different style to selected options |
placeHolder | string | change the place holder |
selectedPlaceHolder | func | allow to change the default string after select any item,can see in Example Code |
selectAllOptions | bool | add select all option |
Example Code
import React, { useState } from 'react';
import MultipleSelect from 'react-selector-multiple';
const App = () => {
const [values_1, setValues_1] = useState([]);
const [values_2, setValues_2] = useState([]);
const [values_3, setValues_3] = useState([]);
const options_1 = [
'Red',
'Green',
'Blue',
'Yellow'
];
const options_2 = [
{ value: 'Red', name: 'Red' },
{ value: 'Green', name: 'Green' },
{ value: 'Blue', name: 'Blue' },
{ value: 'Yellow', name: 'Yellow' }
];
const options_3 = [
{ value: { id: 1 }, name: 'Red' },
{ value: { id: 2, value: 'green' }, name: 'Green' },
{ value: { id: 3, value: 'blue' }, name: 'Blue' },
{ value: { id: 4, value: 'yellow' }, name: 'Yellow' }
];
return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div>
<h4>options_1 array of strings:</h4>
<MultipleSelect
options={options_1}
selectedValues={values_1}
onChange={e => setValues_1(e)}
style={{ borderRadius: '5px', outline: 'none' }}
/>
</div>
<div>
<h4>options_2 array of objects, the value is string:</h4>
<MultipleSelect
options={options_2}
selectedValues={values_2}
onChange={e => setValues_2(e)}
style={{ borderRadius: '5px', outline: 'none' }}
selectedOptionStyle={{ color: '#dc143c' }}
placeHolder='Multiple Select'
selectedPlaceHolder={e => e.map((val, index) => e.length - 1 === index ? val : `${val}, `)}
selectAllOptions
/>
</div>
<div>
<h4>options_3 array of objects, the value is object:</h4>
<MultipleSelect
options={options_3}
selectedValues={values_3}
onChange={e => setValues_3(e)}
style={{ borderRadius: '5px', outline: 'none' }}
selectedOptionStyle={{ color: '#dc143c' }}
placeHolder='Multiple Select'
selectedPlaceHolder={e => e.map((val, index) => e.length - 1 === index ? val.value ? val.value : val.id :
`${val.value ? val.value : val.id}, `)}
selectAllOptions
/>
</div>
</div>
);
}
export default App;