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


`js
import React, { Component } from 'react';
import { SelectState } from 'react-select-multi';

class MyComponent extends Component {
render() {
return (
id="category-select"
options={options}
styles={styles}
onCheck={onCheck}
selected={selected}
/>
);
}
}

`

----


2. Basic Usage (SelectConnected): uses Redux for state management


`js
import React, { Component } from 'react';
import { SelectConnected } from 'react-select-multi';

class MyComponent extends Component {
render() {
return (
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:
`js
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

$3

`
yarn flow
`

$3

`
yarn spec
`

$3

`
yarn coverage
`

$3

`
yarn lint
``

----

Credits

Thanks to Lyn, JD, Mike, Anoop, and 🌳

----

Licence

Apache-2.0