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

demo

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;