react-select2

react-select2

Wrapper for Select2

Installation

npm install react-select2 --save

Usage

Basic usage

import Select2 from 'react-select2';
…

<Select2
  multiple
  data={['bug', 'feature', 'documents', 'discussion']}
  options={
    {
      placeholder: 'search by tags',
    }
  }
/>

Data as an object

<Select2
  data={[
    { text: 'bug', id: 1 },
    { text: 'feature', id: 2 },
    { text: 'documents', id: 3 },
    { text: 'discussion', id: 4 },
  ]}
  options={{
    placeholder: 'search by tags',
  }}
/>

Callbacks

<Select2
  multiple
  data={['bug', 'feature', 'documents', 'discussion']}
  onOpen={this.cbOpen}
  onClose={this.cbClose}
  onSelect={this.cbSelect}
  onChange={this.cbChange}
  onUnselect={this.cbUnselect}
  options={{
    placeholder: 'search by tags',
  }
}
/>

Default value

<Select2
  defaultValue={2} // or as string | array
  data={[
    { text: 'bug', id: 1 },
    { text: 'feature', id: 2 },
    { text: 'documents', id: 3, disabled: true },
    { text: 'discussion', id: 4 },
  ]}
  options={{
    placeholder: 'search by tags',
  }}
/>

Default multiple value

<Select2
  multiple
  defaultValue={[1, 4]}
  data={[
    { text: 'bug', id: 1 },
    { text: 'feature', id: 2 },
    { text: 'documents', id: 3 },
    { text: 'discussion', id: 4 },
  ]}
  options={{
    placeholder: 'search by tags',
  }}
/>

Value

Also possible to change the current value using value property

const { value } = this.props;
…
<Select2
  value={ value }
  data={[
    { text: 'bug', id: 1 },
    { text: 'feature', id: 2 },
    { text: 'documents', id: 3, disabled: true },
    { text: 'discussion', id: 4 },
  ]}
  options={{
    placeholder: 'search by tags',
  }}
/>

Option Groups

<Select2
  multiple
  data={[
    { text: 'Development',
      children: [
        { text: 'bug', id: 1 },
        { text: 'feature', id: 2 },
      ],
    },
    { text: 'documents', id: 3 },
    { text: 'discussion', id: 4 },
  ]}
  options={{
    placeholder: 'search by tags',
  }}
/>

Parent element for dropdown

<Select2
  options={{
    dropdownParent: '#element'
  …

Properties

You can pass any properties such as class, id, data-* attributes

<Select2 className="selector" … />

Access to select2

You can access to select2 as follows

// assign a ref attribute
<Select2 ref="tags" />
// somewhere in your code, access via `this.refs`
this.refs.tags.el

Themes

Default theme in css/select2.css

import 'react-select2/css/select2.css';

Development

• Run webpack-dev-server

  npm run start
  

• Run webpack in watch mode

  npm run watch
  

• Run webpack for build

  npm run build