Spiffy multiselect with checkboxes
npm install react-multiselect-checkboxesA flexible, stylable, compact multi-select component.
It's based on react-select and has a similar API for data and styling.
``bash`
npm i -S react-multiselect-checkboxes
`jsx
import ReactMultiSelectCheckboxes from 'react-multiselect-checkboxes';
// ...
const options = [
{ label: 'Thing 1', value: 1},
{ label: 'Thing 2', value: 2},
];
`
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. |
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.| |
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:
| 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. |
| 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. |
No props, this is just a down-facing chevron icon, in SVG form.
- [ ] Fire up the Github.io site
- [ ] Allow replacing more props (e.g. Menu`)
- [ ] Tests
- [ ] More comprehensive storybook
- [ ] ???