Multiple Select

Features

• Provide multiple select dropdown for any array of data
• Sorting on demand ascending/descending
• Filter by key press and you are able to active and inactive filter
• Customize the placeholder name
• return the multiple checked object of array

Installation via NPM

npm install react-bootstrap-multiselector

npm install react-bootstrap bootstrap

**Dependency ** Please add react-bootstrap as a dependency on your project

Usage

1import { MultipleSelect } from 'react-bootstrap-multiselector';
2
3/* The following line can be included in your src/index.js or App.js file*/
4import 'bootstrap/dist/css/bootstrap.min.css';
5
6<MultipleSelect dataSet = {...} onSelect={...} />

**Props(Required) **

• dataSet: object
• onSelect : function

Optional Props

• sortDirection: boolean
• showFilter: boolean
• className: String
• style: css style,
• selectAllMsg : String

dataSet Object Key

Set the data key that map to Multiple Select

1{
2selectItems: object,          
3  label: String, /* Object key set the label*/
4  placeholder: String ,
5  selectAllLabel: String,  /* Optional*/
6  filterPlaceholder: String,  /* Optional*/
7  dataNotFound: String,   /* Optional */
8  toggleStyle:{},    /*optional or use only style props */
9  toggleClass:"" /*optional or pass the class Name */
10  }

##Example:

1import React from 'react';
2import MultipleSelect from 'react-bootstrap-multiselector'
3import 'bootstrap/dist/css/bootstrap.min.css'
4
5const arrayData = [
6  { name: 'Select-1', key: 'select1', game: 'Badminton' },
7  { name: 'Select-2', key: 'select2', game: 'Football', },
8  { name: 'Select-3', key: 'select3', game: 'Tennis', },
9  { name: 'Select-4', key: 'select4', game: 'Golf', },
10  { name: 'Select-4', key: 'select5',game: 'Handball', },
11  { name: 'Select-4',  key: 'select6', game: 'Cricket', },
12  { name: 'Select-4', key: 'select7', game: 'Chess', },
13  { name: 'Select-4', key: 'select8', game: 'PubG', },
14  { name: 'Select-4', key: 'select9',game: 'Game Of Thorns', }];
15
16// return the selected items 
17const getSelectedItems = (e) => {
18  console.log(e)
19}
20
21// object of Multiple Select
22const multipleSelectItems ={
23  selectItems: arrayData,
24  label:'game',
25  placeholder:"Select Games" ,
26  selectAllLabel:"Select all",
27  filterPlaceholder:"",
28  className:"",
29  dataNotFound:"Not Found",
30}
31
32function App() {
33  return (
34    <div className="container">
35        <MultipleSelect 
36            dataSet={multipleSelectItems} 
37            onSelect={getSelectedItems} 
38            sortDirection
39            showFilter
40            className=""
41            selectAllMsg="All Selected"
42         />
43    </div>
44  );
45}
46
47export default App;
48