1.1.0 • Published 4 years ago
re-multiple-selector v1.1.0
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
- Customise the placeholder name
Installation via NPM
npm install react-multiselect
import MultipleSelect from 'react-multiselect'
Dependency Please add react-bootstrap as a dependency on your project
Usage
import { MultipleSelect } from 'react-multiselect'';
<MultipleSelect dataSet = {...} />
Props
- dataSet: object
- onSelect : function
Optional Props
- sortDirection: boolean
- showFilter: boolean
- className: String
- style: css style
dataSet Object Key
Set the data key that map to Multiple Select
{
selectItems: object,
dataKey : { /* Object key set based upon selectItems Key*/
id: String,
label: String
},
placeholder: String ,
selectAllLabel: String, /* Optional*/
filterPlaceholder: String, /* Optional*/
dataNotFound: String, /* Optional */
toggleStyle:{}, /*optional or use only style props */
toggleClass:"" /*optional or pass the class Name */
}
##Example:
import React, {useState } from 'react';
import MultipleSelect from './react-multiselect''
import 'bootstrap/dist/css/bootstrap.min.css';
const arrayData = [
{ name: 'Select-1', key: 'select1', game: 'Badminton' },
{ name: 'Select-2', key: 'select2', game: 'Football', },
{ name: 'Select-3', key: 'select3', game: 'Tennis', },
{ name: 'Select-4', key: 'select4', game: 'Golf', },
{ name: 'Select-4',key: 'select5',game: 'Handball', },
{ name: 'Select-4', key: 'select6', game: 'Cricket', },
{ name: 'Select-4', key: 'select7', game: 'Chess', },
{ name: 'Select-4', key: 'select8', game: 'PubG', },
{ name: 'Select-4', key: 'select9',game: 'Game Of Thorns', }];
// return the selected items
const getSelectedItems = (e) => {
console.log(e)
}
// object of Multiple Select
const multipleSelectItems ={
selectItems: arrayData,
dataKey:{
id: "key",
label:'game'
},
placeholder:"Select Games" ,
selectAllLabel:"Select all",
filterPlaceholder:"",
className:"",
dataNotFound:"Not Found",
}
function App() {
return (
<div className="container">
<MultipleSelect dataSet={multipleSelectItems}
onSelect={getSelectedItems}
sortDirection
showFilter
className=""
/>
</div>
);
}
export default App;
1.1.0
4 years ago