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

$3

Import _BootstrapSelect_ component

import BootstrapSelect from 'react-bootstrap-select-dropdown';

Use of component



Required JSON to list _{options}_

``
"options": [
{
"labelKey": "optionItem1",
"value": "Option item 1"
},
{
"labelKey": "optionItem2",
"value": "Option item 2"
}
]
`

$3

`
const handleChange = (selectedOptions) => {
console.log(selectedOptions);
}



`

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';`