add new props: value and placeholder

Author: mathieudutour

README.md

@@ -46,7 +46,7 @@ var App = React.createClass({
       var filters = ['user.name', 'subject'];
       mails = mails.filter(this.refs.search.filter(filters));
     }
-    
+
     return (
       <div>
         <SearchInput ref='search' onChange={this.searchUpdated} />
@@ -61,7 +61,7 @@ var App = React.createClass({
       </div>
     );
   },
-  
+
   searchUpdated(term) {
     this.setState({searchTerm: term}); // needed to force re-render
   }
@@ -94,6 +94,14 @@ Reduce call frequency to the `onChange` function (in ms). Default is `200`.
 
 Define if the search should be case sensitive. Default is `false`
 
+##### placeholder
+
+Define the placeholder of the input. Default is `Search`.
+
+##### value
+
+Define the value of the input.
+
 ### Methods
 
 ##### filter([keys])
@@ -117,6 +125,3 @@ Look at [react-search-input.css](https://github.com/mathieudutour/react-search-i
 ---
 
 MIT Licensed
-
-
-

bower.json

@@ -4,7 +4,7 @@
     "react-search-input.js",
     "react-search-input.css"
   ],
-  "version": "0.2.7",
+  "version": "0.2.8",
   "homepage": "https://github.com/enki-com/react-search-input",
   "description": "Simple react.js component for a search input, providing a filter function.",
   "keywords": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-search-input",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Simple react.js component for a search input, providing a filter function.",
   "main": "react-search-input.js",
   "dependencies": {

react-search-input.js

@@ -18,33 +18,46 @@
       filterKeys: React.PropTypes.oneOf([
         React.PropTypes.string,
         React.PropTypes.arrayOf(React.PropTypes.string)
-      ])
-
+      ]),
+      placeholder: React.PropTypes.string,
+      value: React.PropTypes.string
     },
 
     getDefaultProps: function() {
       return {
         className: '',
         onChange: function() {},
         caseSensitive: false,
-        throttle: 200
+        throttle: 200,
+        placeholder: 'Search'
       };
     },
 
     getInitialState: function() {
       return {
-        searchTerm: ''
+        searchTerm: this.props.value || ''
       };
     },
 
+    componentWillReceiveProps: function(nextProps) {
+      if (nextProps.value && nextProps.value !== this.props.value) {
+        var e = {
+          target: {
+            value: nextProps.value
+          }
+        };
+        this.updateSearch(e);
+      }
+    },
+
     render: function() {
       return (
         React.createElement('div', {className: 'search-input ' + this.props.className},
           React.createElement('div', {className: 'search-wrapper'},
             React.createElement('span', {className: 'search-icon'}, String.fromCharCode(9906)),
             React.createElement('input', {type: 'search', value: this.state.searchTerm,
               onChange: this.updateSearch, className: 'search-field',
-              placeholder: 'Search'})
+              placeholder: this.props.placeholder})
           )
         )
       );