Merge pull request #2 from brookslyrette/master

Expanded for object based data [{id: x, text: 'label'}]

Author: rkit

README.md

@@ -21,6 +21,18 @@ import Select2 from 'react-select2-wrapper';
  }} />
 ```
 
+With Object Data
+```js
+import Select2 from 'react-select2-wrapper';
+
+<Select2
+  multiple={false}
+  data={[{text: 'Bug', id: 0}, {text: 'Feature', id: 1}, {text: 'Documents', id: 2}, {text: 'Discussion', id: 'UUID'}]}
+  options={{
+    placeholder: 'search by tags',
+  }} />
+```
+
 With callbacks
 
 ```js

examples/src/components/Tags.js

@@ -6,6 +6,7 @@ export default class Tags extends Component {
   render() {
     return (
       <div>
+      Using ['value', 'value2']
         <Select2
           multiple={true}
           data={['bug', 'feature', 'documents', 'discussion']}
@@ -17,6 +18,25 @@ export default class Tags extends Component {
           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.6",
+  "version": "0.0.7",
   "description": "React component for Select2",
   "main": "lib/components/Select2.js",
   "scripts": {

src/components/Select2.js

@@ -50,7 +50,11 @@ export default class Select2 extends Component {
     return (
       <select multiple={this.props.multiple}>
         {this.props.data.map((item, k) => {
-          return (<option key={'option-' + k}>{item}</option>);
+          if (typeof item === 'string' ||
+            ((!!item && typeof item === 'object') && Object.prototype.toString.call(item) === '[object String]')) {
+            return (<option key={'option-' + k}>{item}</option>);
+          }
+          return (<option key={'option-' + k} value={item.id}>{item.text}</option>);
         })}
       </select>
     );