react-select-multi

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

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}
      />
    );
  }
}

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

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}
      />
    );
  }
}

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 🌳

Licence

Apache-2.0