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
With Yarn:
yarn add react-select-multi
With NPM:
npm install react-select-multi
import React, { Component } from 'react';
import { SelectState } from 'react-select-multi';
class MyComponent extends Component {
render() {
return (
<SelectState
id="category-select"
options={options}
styles={styles}
onCheck={onCheck}
selected={selected}
/>
);
}
}
import React, { Component } from 'react';
import { SelectConnected } from 'react-select-multi';
class MyComponent extends Component {
render() {
return (
<SelectConnected
id="select-multi-1"
options={options}
initialSelected={initialSelected}
styles={styles}
selected={selected}
/>
);
}
}
- R: required
- ** (styles): see below
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 |
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) |
Prop | Type | Default | Description |
---|---|---|---|
initialSelected |
array |
[] |
Options to be pre-selected |
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',
};
yarn flow
yarn spec
yarn coverage
yarn lint
Thanks to Lyn, JD, Mike, Anoop, and 🌳