hardik-kondhiyareact-bootstrap-select-dropdown
A custom Bootstrap select / multiselect using dropdown button, designed to behave like regular select form control. Bootstrap Select/Multiselect developed to use with React 16+ and Bootstrap 4.
Installation
npm i react-bootstrap-select-dropdown --save
Usage
Quick Usage
Import BootstrapSelect component
import BootstrapSelect from 'react-bootstrap-select-dropdown';
Use of component
<BootstrapSelect options={options} />
Required JSON to list {options}
"options": [
{
"labelKey": "optionItem1",
"value": "Option item 1"
},
{
"labelKey": "optionItem2",
"value": "Option item 2"
}
]Use of callback function
const handleChange = (selectedOptions) => {
console.log(selectedOptions);
}
<BootstrapSelect options={options} onChange={handleChange} />
Optional key support in {options} JSON
| Key | Type | Default | Description |
|---|---|---|---|
| isSelected | boolean | | It is used to set option selected default on component load. | |
| isDisabled | boolean | | It is used to set option disabled and user will unable to select. | |
| icon | string | | Class name of an icon to show before option text. You can define multiple classes with icon class. | |
| className | string | | Add custom class to each option | |
| style | style JSON | | Add custom style attr to each option |
"options": [
{
"labelKey": "optionItem1", // Required
"value": "Option item 1", // Required
"isSelected": true, // Optional
"isDisabled": false, // Optional
"icon": "icon-class-name" //Optional
"className": "custom-class-name" //Optional
"style": { //Optional
"backgroundColor":"#000000",
"color": "#FFFFFF"
}
}
]Props support in BootstrapSelect
| Prop | Type | Default | Description |
|---|---|---|---|
| options | array | | An array of option's objects to list in dropdown menu | |
| defaultOptions | array | | It's allow to set default option(s) manually on load even if "isSelected" is not set in option's object. Array item(s) must contain value same as "labelKey" of options. | |
| isMultiSelect | boolean | false | Allow to select multiple options. |
| showTick | boolean | false | To display tick with option on select. |
| showSearch | boolean | false | Allow to search from options list. |
| showAction | boolean | false | Enable actions buttons select/deselect all options, will work only if isMultiSelect sets to true. |
| disabled | boolean | false | It's allow you disable boostrap select on component load |
| selectStyle | string | btn-light | Apply custom style by using custom class or bootstrap btn style classes. |
| actionBtnStyle | string | btn-outline-dark | Apply custom style to action buttons (select/deselect all) by using custom class or bootstrap btn style classes. Will work only if isMultiSelect sets to true. |
| menuSize | 'auto'/false/number | 'auto' | Allows to set max. options to list with vertical scrollbar if many options. |
| showCountOn | number | | Show selected options number as selected value in select. | |
| className | string | | Add classes to outer most tag. | |
| placeholder | string | No option selected | Set custom placeholder if no option selected. |
| onChange | function | | An onChange handler passed to the Toggle component | |
| onClose | function | | An onClose handler passed to the Toggle component |
Dependencies
Make sure Bootstrap 4 is installed in you project or required to install it and css needs to imported in project:
Installation bootstrap
npm install bootstrap@4.6.0
Import bootstrap css
import 'bootstrap/dist/css/bootstrap.min.css';