Add ability to specify a default value

Author: rkit

README.md

@@ -12,6 +12,7 @@ npm install react-select2-wrapper --save
 
 ```js
 import Select2 from 'react-select2-wrapper';
+…
 
 <Select2
  multiple={true}
@@ -23,18 +24,20 @@ import Select2 from 'react-select2-wrapper';
 
 With data as an object
 ```js
-import Select2 from 'react-select2-wrapper';
-
 <Select2
   multiple={false}
-  data={[{text: 'bug', id: 1}, {text: 'feature', id: 2}, {text: 'documents', id: 3}, {text: 'discussion', id: 4}]}
+  data={[
+    { text: 'bug', id: 1 },
+    { text: 'feature', id: 2 },
+    { text: 'documents', id: 3 },
+    { text: 'discussion', id: 4 },
+  ]}
   options={{
     placeholder: 'search by tags',
   }} />
 ```
 
 With callbacks
-
 ```js
 <Select2
  multiple={true}
@@ -49,6 +52,47 @@ With callbacks
  }} />
 ```
 
+With default value
+```js
+<Select2
+  multiple={false}
+  defaultValue={2}
+  data={[
+    { text: 'bug', id: 1 },
+    { text: 'feature', id: 2 },
+    { text: 'documents', id: 3 },
+    { text: 'discussion', id: 4 },
+  ]}
+  options={{
+    placeholder: 'search by tags',
+  }} />
+```
+
+With default multiple value
+
+```js
+<Select2
+  multiple={true}
+  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',
+  }} />
+```
+
+You can access to select2 as follows
+```js
+// 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](css/select2.css)

examples/src/components/Tags.js

@@ -6,37 +6,67 @@ export default class Tags extends Component {
   render() {
     return (
       <div>
-      Using ['value', 'value2']
+        Basic usage<br/>
+        <Select2
+         multiple={true}
+         data={['bug', 'feature', 'documents', 'discussion']}
+         options={{
+           placeholder: 'search by tags',
+         }} />
+        <br/><br/>
+        With data as an object<br/>
+        <Select2
+          multiple={false}
+          data={[
+            { text: 'bug', id: 1 },
+            { text: 'feature', id: 2 },
+            { text: 'documents', id: 3 },
+            { text: 'discussion', id: 4 },
+          ]}
+          options={{
+            placeholder: 'search by tags',
+          }} />
+        <br/><br/>
+        With callbacks<br/>
+        <Select2
+         multiple={true}
+         data={['bug', 'feature', 'documents', 'discussion']}
+         onOpen={() => { console.log('onOpen'); } }
+         onClose={() => { console.log('onClose'); } }
+         onSelect={() => { console.log('onSelect'); } }
+         onChange={() => { console.log('onChange'); } }
+         onUnselect={() => { console.log('onUnselect'); } }
+         options={{
+           placeholder: 'search by tags',
+         }} />
+        <br/><br/>
+        With default value<br/>
+        <Select2
+          multiple={false}
+          defaultValue={2}
+          data={[
+            { text: 'bug', id: 1 },
+            { text: 'feature', id: 2 },
+            { text: 'documents', id: 3 },
+            { text: 'discussion', id: 4 },
+          ]}
+          options={{
+            placeholder: 'search by tags',
+          }} />
+        <br/><br/>
+        With default multiple value<br/>
         <Select2
           multiple={true}
-          data={['bug', 'feature', 'documents', 'discussion']}
-          onOpen={() => { console.log('onOpen'); } }
-          onClose={() => { console.log('onClose'); } }
-          onSelect={() => { console.log('onSelect'); } }
-          onChange={() => { console.log('onChange'); } }
-          onUnselect={() => { console.log('onUnselect'); } }
+          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',
           }} />
-          <br/>
-          <br/>
-          Using {'{'}id: 'x', text:'foo'{'}'}
-          <Select2
-            multiple={false}
-            data={[
-              {text: 'Bug', id: 0},
-              {text: 'Feature', id: 1},
-              {text: 'Documents', id: 2},
-              {text: 'Discussion', id: 'UUID'},
-            ]}
-            onOpen={() => { console.log('onOpen'); } }
-            onClose={() => { console.log('onClose'); } }
-            onSelect={() => { console.log('onSelect'); } }
-            onChange={() => { console.log('onChange'); } }
-            onUnselect={() => { console.log('onUnselect'); } }
-            options={{
-              placeholder: 'search by tags',
-            }} />
       </div>
     );
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-select2-wrapper",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "description": "React component for Select2",
   "main": "lib/components/Select2.js",
   "scripts": {

src/components/Select2.js

@@ -5,6 +5,10 @@ import 'select2';
 
 export default class Select2 extends Component {
   static propTypes = {
+    defaultValue: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.array,
+    ]),
     data: PropTypes.array,
     events: PropTypes.array,
     options: PropTypes.object,
@@ -49,7 +53,7 @@ export default class Select2 extends Component {
 
   render() {
     return (
-      <select multiple={this.props.multiple}>
+      <select multiple={this.props.multiple} defaultValue={this.props.defaultValue}>
         {this.props.data.map((item, k) => {
           if (typeof item === 'string' ||
             ((!!item && typeof item === 'object') && Object.prototype.toString.call(item) === '[object String]')) {