React MultiSelect

React component that allow you to slect multiple options from set of category. It has list of options [See Options List Section] that can be selected based on requirement. Multielect can also handle dynamic data very well.

Demo

Live Demo URL : http://demo.techhysahil.com/react-MultiSelect/

Getting Started

The easiest way to use React-MultiSelect is to install it using NPM.

npm install react-itra-multi-select --save

Now import React MultiSelect into your project.

import ReactMultiSelect from 'react-multi-select';

// Be sure to include styles at some point
import 'react-multi-select/dist/font/icons.css';
import 'react-multi-select/dist/react-MultiSelect.css.css';

Usage

After adding react-multi-selct into your project, just add below tag into your templete.

Say what the step will be

let categoryList = [
  {
    id: 0, displayName : "Jaypee Infra", value : "jaypee infra", checked : true, disabled : false
  },
  {
    id: 1, displayName : "CDSL", value : "cdsl", checked : false, disabled : false
  },
  {
    id: 2, displayName : "Cipla", value : "cipla", checked : false, disabled : true
  },
  {
    id: 3, displayName : "Unitech", value : "unitech", checked : true, disabled : false
  }
];

let categoryName = "Customer";

<ReactMultiSelect 
  categoryList = {categoryList}
  categoryName = {categoryName}
  onClose = {this.closeMultiselect.bind(this)}
/>

Options List

| OPtion | Required/Optional | Description | | --- | --- | --- | | id | Required & Unique | Unique id for each category| | categoryName | Required | Placeholder or Name of the Category | | categoryList | Required | List of categories to be selected | | limitNoOfSelection | Optional | Limit maximum number of category that an be selected | | disabled | Optional | disable Multiselect control, default value is false | | leftIcon | Optional | Show Multiselect leftIcon, default value is false | | showSearch | Optional | Weather search needs to be shown or hidden, default value is false i.e Search is hidden |

categoryList Object options

| OPtion | Required/Optional | Description | | --- | --- | --- | | checked | Require | Category is already checked| | disabled | Required | Category is disabled |

Authors

*Sahil Gupta Github

License

This project is licensed under the Custom License - see the LICENSE.md file for details