react-bootstrap-select-dropdown
Version:
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**.
105 lines (78 loc) • 6.61 kB
Markdown
# react-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';`