1.0.0 • Published 8 years ago

react-itra-multi-select v1.0.0

Weekly downloads
1
License
ISC
Repository
gitlab
Last release
8 years ago

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

OPtionRequired/OptionalDescription
idRequired & UniqueUnique id for each category
categoryNameRequiredPlaceholder or Name of the Category
categoryListRequiredList of categories to be selected
limitNoOfSelectionOptionalLimit maximum number of category that an be selected
disabledOptionaldisable Multiselect control, default value is false
leftIconOptionalShow Multiselect leftIcon, default value is false
showSearchOptionalWeather search needs to be shown or hidden, default value is false i.e Search is hidden

categoryList Object options

OPtionRequired/OptionalDescription
checkedRequireCategory is already checked
disabledRequiredCategory is disabled

Authors

*Sahil Gupta Github

License

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