react-multiselect-dropdown-bootstrap

A React.js component to easy create dropdowns that allows multiple option selection.

Examples

Here is an example with default settings when only an array with options is provided:

How to install

npm install react-multiselect-dropdown-bootstrap

Then you need to import it and place somewere in your app. Here is an example for default setup:

1import React from "react";
2import DropdownMultiselect from "react-multiselect-dropdown-bootstrap";
3
4class SomeSection extends React.Component {
5  render() {
6    return (
7      <DropdownMultiselect
8        options={["Australia", "Canada", "USA", "Poland", "Spain", "France"]}
9        name="countries"
10      />
11    );
12  }
13}
14
15export default SomeSection;

You can also use an options with different values than labels. Please check an example below:

1import React from "react";
2import DropdownMultiselect from "react-multiselect-dropdown-bootstrap";
3
4class SomeSection extends React.Component {
5  render() {
6    const optionsArray = [
7      { key: "au", label: "Australia" },
8      { key: "ca", label: "Canada" },
9      { key: "us", label: "USA" },
10      { key: "pl", label: "Poland" },
11      { key: "es", label: "Spain" },
12      { key: "fr", label: "France" },
13    ];
14
15    return <DropdownMultiselect options={optionsArray} name="countries" />;
16  }
17}
18
19export default SomeSection;

Available props

Required

• options - an array with available options. You can use a simple array like ["Spain", "Italy"] or array of objects like [{key: "es", label: "Spain"}, {key: "it", label: "Italy"}] to set a different values to select than labels that will be shown in a dropdown.
• name - a string with the name (just like for normal html inputs)

Optional

• selected - an array with options that should be selected as default
• handleOnChange - a callback function to run when selected options will be changed. A "selected" param is available. It contains an array of currently selected options. Example:

1handleOnChange={(selected) => {
2  props.changeMarket(selected);
3}}

• placeholder - default value is "Nothing selected"
• buttonClass - you can specify a css class for button. Default is "btn-light"
• placeholderMultipleChecked - you can specify a placeholder that will be used if more than one option is selected at the same time. For example: "Multiple selected"
• optionKey - specify custom key property of object. Default is "key"
• optionLabel - specify custom label property of object. Default is "label"
• selectDeselectLabel - specify custom label to use in select/deselect all button. Default is "Select/Deselect All"