React Multiple Select Dropdown

Installation and usage

MultipleSelectDropDown is a component which you can use in your forms where you need to pick more than one item. for example you want to add some users to a group or pick multiple tags for your article. it is responsive too, MultipleSelectDropDown will transform into a smaller component when you resize or change its position when there is no space in placement.

npm install --save react-multiple-select-dropdown

import React, { Component } from 'react'
import MultipleSelect from 'react-multiple-select-dropdown';
import 'react-multiple-select-dropdown/dist/index.css';

class YourWrapperComponent extends Component {
  state = {
    selectedOptions: [],
    options: [
    { value: 1, label: 'react' },
    { value: 2, label: 'reactnative' },
    { value: 3, label: 'nodejs' },
    { value: 4, label: 'redux' },
    { value: 5, label: 'mobx' }
    ]
  }

  onChange = (selectedOptions) => {
    this.setState({ selectedOptions: selectedOptions });
  }

  render() {
  const { selectedOptions, options } = this.state;
  return (
    <div>
      <MultipleSelect
        selectedOptions={selectedOptions}
        options={options}
        onChange={this.onChange}
      />
    </div>
);}

ValueLabelModel

My model to keep data in option is ValueLabel. An object with value and label as properties.
use value to keep properties like id and use label to keep field you want to display like username

type ValueLabel  = {
  value: any;
  label: string;
}

// or 

interface ValueLabel {
  value: any;
  label: string;
}