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