React Multiselect Checkboxes

A flexible, stylable, compact multi-select component.

It's based on react-select and has a similar API for data and styling.

!An image of the component

Installation

``bash
npm i -S react-multiselect-checkboxes
`

Basic usage

`jsx
import ReactMultiSelectCheckboxes from 'react-multiselect-checkboxes';

// ...
const options = [
{ label: 'Thing 1', value: 1},
{ label: 'Thing 2', value: 2},
];

`

Props

Nearly all of the options from [react-select]() are supported, except where they don't make sense (for instance, isMulti={false} isn't supported, since this is always in multi-select mode). These props are passed directly to the underlying Select component. In addition, there are some options which are specific to react-multiselect-checkboxes:

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| placeholderButtonLabel| PropTypes.string | 'Select...' | Displayed on dropdown button if no value is selected. |
| getDropdownButtonLabel | PropTypes.func | ({ placeholderButtonLabel, value }) => {/ if-else logic/} | Get the label for the dropdown, based on the placeholder and the current value. By default this is (a) the placeholder, if nothing is selected; (b) the selected value's label, if one option is selected; or (c) the number selected (e.g. "3 selected") if more than one option is selected |
| rightAligned | PropTypes.bool | false | Whether to align the menu to the right side of the component. By default it's flush with the left. |

Styling

Like props, styles supported by react-select are passed directly into the underlying Select component. Some of the defaults have been tweaked for the multiselect, but you can override them like normal (see https://react-select.com/styles). In addition, there are some styles which are specific to react-multiselect-checkboxes:

| Style key | Options | Description | Screenshot |
| --- | --- | --- | --- |
| dropdownButton | { value, isOpen, width }| Used to style the dropdown button component. Pressing this component opens the menu. | |
| groupHeading | { checked, indeterminate }| This exists in react-select already -- it's used to style the group heading label. We add two new options based on the selected state of the group: checked is true if all options in the group are selected, indeterminate if only some are selected.| |

Component replacement

Again, we're taking this API straight from react-select, and you can replace any of the basic Select components as well. There are some new components which are specific to react-multiselect-checkboxes too:

$3

| Prop | Type | Description |
| --- | --- | --- |
| children| PropTypes.node | The children _for the menu_. Note: this is _not_ the dropdown button / click target. |
| isOpen | PropTypes.bool | Is the Dropdown open right now? |
| rightAligned | PropTypes.bool | Whether to align the menu to the right side of the component. By default it's flush with the left. |
| onClose | PropTypes.func | Callback function to run when the menu is closed. In the default implementation this happens on outside click. |
| target | PropTypes.node | The dropdown button / click target. Clicking on this will generally open the menu. |

$3

| Prop | Type | Description |
| --- | --- | --- |
| children| PropTypes.node | The contents of the dropdown button, generally a string. |
| onPress | PropTypes.func | Callback function to run when the dropdown button is pressed. This will generally open the menu. |
| iconAfter | PropTypes.node | An icon component to render after the button's contents. By default it's a down-facing chevron. |
| style | PropTypes.object | The style to apply to the dropdown button. If you're doing custom styling, you'll probably ignore it. |

$3

No props, this is just a down-facing chevron icon, in SVG form.

Road to 1.0

- [ ] Fire up the Github.io site
- [ ] Allow replacing more props (e.g. Menu`)
- [ ] Tests
- [ ] More comprehensive storybook
- [ ] ???