react-simple-multi-select

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

License

MIT (Free Package)