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',
}}
/>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.elDefault 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent