Wrapper for Select2
npm install react-select2-wrapper --save
import Select2 from 'react-select2-wrapper';
…
<Select2
multiple
data={['bug', 'feature', 'documents', 'discussion']}
options={
{
placeholder: 'search by tags',
}
}
/>
<Select2
data={[
{ text: 'bug', id: 1 },
{ text: 'feature', id: 2 },
{ text: 'documents', id: 3 },
{ text: 'discussion', id: 4 },
]}
options={{
placeholder: 'search by tags',
}}
/>
<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',
}
}
/>
<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',
}}
/>
<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',
}}
/>
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',
}}
/>
<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',
}}
/>
You can pass any properties such as class
, id
, data-*
attributes
<Select2 className="selector" … />
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
Default theme in css/select2.css
import 'react-select2-wrapper/css/select2.css';
-
Run webpack-dev-server
npm run start
-
Run webpack in watch mode
npm run watch
-
Run webpack for build
npm run build