Package Exports

react-select2-wrapper
react-select2-wrapper/css/select2.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-select2-wrapper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-select2-wrapper

Wrapper for Select2

Installation

npm install react-select2-wrapper --save

Usage

Basic usage

import Select2 from 'react-select2-wrapper';
…

<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',
  }}
/>

<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-wrapper/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
```