React Select Multi
Description
A versatile React Component providing awesome UI select components.
- default = basic select (single option)
- isMultipleSelect = multiple select (multiple options)
- isSearchable = select with search input field
State management options
- React Component state
- Redux
Installation
With Yarn:
yarn add react-select-multi
With NPM:
npm install react-select-multi
1. Basic Usage (SelectState): uses component state for state management
;; { return <SelectState id="category-select" options=options styles=styles onCheck=onCheck selected=selected /> ; } 2. Basic Usage (SelectConnected): uses Redux for state management
;; { return <SelectConnected id="select-multi-1" options=options initialSelected=initialSelected styles=styles selected=selected /> ; } Configuration
- R: required
- ** (styles): see below
Universal Properties
| Prop | Type | Default | Description |
|---|---|---|---|
id |
string |
R | Unique identifier for the component |
isMultipleSelect |
boolean |
false |
Enable multiple options to be selected |
isSearchable |
boolean |
false |
Enable search input for options |
label |
string |
'' |
Label for component (above MultiSelect) |
placeholder |
string |
'' |
Placeholder for control bar |
options |
array |
R | Options for MultiSelect |
styles |
object |
** | CSS class names for MultiSelect |
SelectState Properties
| Prop | Type | Default | Description |
|---|---|---|---|
selected |
array |
[] |
Options that are selected; keep this updated (in combination with onCheck) in order for selected options to be updated |
onCheck |
func |
R | Callback, invoked after an option is clicked, onCheck(option.tag, isMultipleSelect) |
SelectConnected Properties
| Prop | Type | Default | Description |
|---|---|---|---|
initialSelected |
array |
[] |
Options to be pre-selected |
Styles
Default classNames:
styles: wrapper: 'rsm-wrapper' label: 'rsm-label' controlContainer: 'rsm-control__container' controlPlaceholder: 'rsm-control__placeholder' search: 'rsm-search' expandIcon: 'rsm-arrow-down' collapseIcon: 'rsm-arrow-up' optionContainer: 'rsm-option__container' optionBar: 'rsm-option__bar' optionCheckbox: 'rsm-option__checkbox';Tests
Run flow check
yarn flow
Run test suite
yarn spec
Run with coverage report
yarn coverage
Run linter
yarn lint
Credits
Thanks to Lyn, JD, Mike, Anoop, and 🌳