React Simple Multi Select

React Simple Multi Select is easy to use and configure.

Installation

$ npm install --save react-simple-multi-select

Running example in local

$ git clone https://github.com/ravip2900/react-simple-multi-select.git
$ npm start

It'll open localhost:2900 port, where you can see live demo.

1). Array of values Example

import React from 'react';
import ReactDOM from 'react-dom'
import MultiSelect from 'react-simple-multi-select';

class  Example extends React.Component{
  constructor(props){
    super(props);
    this.state={
      itemList: [
        "React Js",
        "Node Js",
        "Express Js",
        "Next Js",
        "Vue Js",
        "Mongo Db"
      ],
      selectedItemList: [
        "React Js",
        "Next Js",
        "Mongo Db"
      ]
    };
    this.changeList = this.changeList.bind(this);
  }

  changeList(selectedItemList){
    this.setState({selectedItemList});
  }

  render(){
    return(
      <div>
        <h1>React Simple Multi Select</h1>
        <MultiSelect
          title={"Multi Select"}
          itemList={this.state.itemList}
          selectedItemList={this.state.selectedItemList}
          changeList={this.changeList}
        />
      </div>
    )
  }
}

2). Array of Objects Example

import React from 'react';
import ReactDOM from 'react-dom'
import MultiSelect from 'react-simple-multi-select';

class  Example extends React.Component{
  constructor(props){
    super(props);
    this.state={
      itemList: [
        {key:"React Js", value:"react"},
        {key:"Node Js", value:"node"},
        {key:"Express Js", value:"express"},
        {key:"Next Js", value:"next"},
        {key:"Vue Js", value:"vue"},
        {key:"Mongo Db", value:"mongo"}
      ],
      selectedItemList: [
        {key:"React Js", value:"react"},
        {key:"Next Js", value:"next"},
        {key:"Mongo Db", value:"mongo"}
      ]
    };
    this.changeList = this.changeList.bind(this);
  }

  changeList(selectedItemList){
    this.setState({selectedItemList});
  }

  render(){
    return(
      <div>
        <h1>React Simple Multi Select</h1>
        <MultiSelect
          title={"Multi Select"}
          itemList={this.state.itemList}
          selectedItemList={this.state.selectedItemList}
          changeList={this.changeList}
          isObjectArray={true}
        />
      </div>
    )
  }
}

Configurable Props

Props | Type | Required | Default Value | Description --- | --- | --- | --- | --- title | String | true | Multi Select | title of the multi select itemList | Array | true | [] | list of items selectedItemList | Array | true | [] | selected list of items changeList | Func | true | null | function to modify the list borderRadius | Number | false | 4 | border radius borderColor | String | false | default | border color borderTopColor | String | false | default | border top color borderRightColor | String | false | default | border right color borderLeftColor | String | false | default | border left color borderBottomColor | String | false | default | border bottom color textColor | String | false | default | multi select text color iconColor | String | false | default | icon color isObjectArray | Boolean | false | false | required if passing array of objects listItemColor | String | false | black | list item color listBackgroundColor | String | false | white | list background color

License

MIT (Free Package)