1.0.0 • Published 8 years ago
react-itra-multi-select v1.0.0
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
1.0.0
8 years ago