Merge pull request #32 from nkbt/Allow-any-element-to-be-used

Allow any element to be used

Author: nkbt

README.md

@@ -8,9 +8,8 @@
 [![Dependencies](https://img.shields.io/david/nkbt/react-debounce-input.svg?style=flat-square)](https://david-dm.org/nkbt/react-debounce-input)
 [![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-debounce-input.svg?style=flat-square)](https://david-dm.org/nkbt/react-debounce-input#info=devDependencies)
 
-React component that renders Input with debounced onChange
-Can be used as drop-in replacement for `<input type="text" />`
-
+React component that renders an Input, Textarea or other element with debounced onChange.
+Can be used as drop-in replacement for `<input type="text" />` or `<textarea />`
 
 
 ![React Debounce Input](src/example/react-debounce-input.gif)
@@ -82,6 +81,35 @@ ReactDOM.render(<App />, appRoot);
 
 ## Options
 
+#### `element` : PropTypes.string or React.PropTypes.func (default: "input")
+
+You can specify element="textarea". For Example:
+
+```js
+<DebounceInput element="textarea" />
+```
+
+Will result in
+
+```js
+<textarea />
+```
+
+Note: when rendering a `<textarea />` you may wish to set `forceNotifyByEnter = {false}` so the user can make new lines without forcing notification of the current value.
+
+This package has only been tested with `<input />` and `<textarea />` but should work with any element which has `value` and `onChange` props.
+
+You can also use a custom react component as the element. For Example:
+
+```js
+<DebounceInput element={CustomReactComponent} />
+```
+
+Will result in
+
+```js
+<CustomReactComponent />
+```
 
 #### `onChange`: PropTypes.func.isRequired
 
@@ -117,6 +145,7 @@ Same as `forceNotifyByEnter`, but notification will be sent when focus leaves th
 
 ```js
 <DebounceInput
+  type="number"
   onChange={event => this.setState({value: event.target.value})}
   placeholder="Name"
   className="user-name" />
@@ -125,7 +154,8 @@ Same as `forceNotifyByEnter`, but notification will be sent when focus leaves th
 Will result in
 
 ```js
-<input type="text"
+<input
+  type="number"
   placeholder="Name"
   className="user-name" />
 ```

src/Component.js

@@ -5,6 +5,8 @@ import {shouldComponentUpdate} from 'react/lib/ReactComponentWithPureRenderMixin
 
 export const DebounceInput = React.createClass({
   propTypes: {
+    element: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]),
+    type: React.PropTypes.string,
     onChange: React.PropTypes.func.isRequired,
     onKeyDown: React.PropTypes.func,
     onBlur: React.PropTypes.func,
@@ -21,6 +23,8 @@ export const DebounceInput = React.createClass({
 
   getDefaultProps() {
     return {
+      element: 'input',
+      type: 'text',
       minLength: 0,
       debounceTimeout: 100,
       forceNotifyByEnter: true,
@@ -111,6 +115,7 @@ export const DebounceInput = React.createClass({
 
   render() {
     const {
+      element,
       onChange: _onChange,
       value: _value,
       minLength: _minLength,
@@ -142,13 +147,13 @@ export const DebounceInput = React.createClass({
       }
     } : {};
 
-    return (
-      <input type="text"
-        {...props}
-        onChange={this.onChange}
-        value={this.state.value}
-        {...onKeyDown}
-        {...onBlur} />
-    );
+
+    return React.createElement(element, {
+      ...props,
+      onChange: this.onChange,
+      value: this.state.value,
+      ...onKeyDown,
+      ...onBlur
+    });
   }
 });

src/example/App/Textarea.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import DebounceInput from '../..';
+import css from './App.css';
+
+
+const Textarea = React.createClass({
+  getInitialState() {
+    return {
+      value: '',
+      minLength: 0,
+      debounceTimeout: 500,
+      infinite: false,
+      forceNotifyByEnter: false,
+      forceNotifyOnBlur: true
+    };
+  },
+
+
+  render() {
+    const {
+      minLength, infinite, debounceTimeout,
+      forceNotifyByEnter, forceNotifyOnBlur,
+      value, key
+    } = this.state;
+
+    return (
+      <div>
+        <div className={css.config}>
+          <label className={css.label}>
+            Min length:
+            <input className={css.input}
+              type="range"
+              value={minLength} step={1} min={0} max={10}
+              onChange={e => this.setState({minLength: parseInt(e.target.value, 10)})} />
+            {minLength}
+          </label>
+
+          <label className={css.label}>
+            Debounce timeout:
+            <input className={css.input}
+              type="range"
+              disabled={infinite}
+              value={debounceTimeout} step={100} min={0} max={2000}
+              onChange={e => this.setState({debounceTimeout: parseInt(e.target.value, 10)})} />
+            {debounceTimeout}
+          </label>
+
+          <label className={css.label}>
+            Infinite timeout:
+            <input className={css.input}
+              type="checkbox"
+              checked={infinite}
+              onChange={e => this.setState({infinite: e.target.checked})} />
+          </label>
+        </div>
+
+        <div className={css.config}>
+          <label className={css.label}>
+            Notify by:
+          </label>
+
+          <label className={css.label}>
+            "Enter" keypress:
+            <input className={css.input}
+              type="checkbox"
+              checked={forceNotifyByEnter}
+              onChange={e => this.setState({forceNotifyByEnter: e.target.checked})} />
+          </label>
+
+          <label className={css.label}>
+            Blur:
+            <input className={css.input}
+              type="checkbox"
+              checked={forceNotifyOnBlur}
+              onChange={e => this.setState({forceNotifyOnBlur: e.target.checked})} />
+          </label>
+        </div>
+
+        <DebounceInput
+          cols="60"
+          rows="7"
+          element="textarea"
+          forceNotifyByEnter={forceNotifyByEnter}
+          forceNotifyOnBlur={forceNotifyOnBlur}
+          minLength={minLength}
+          debounceTimeout={infinite ? -1 : debounceTimeout}
+          onChange={e => this.setState({value: e.target.value})}
+          onKeyDown={e => this.setState({key: e.key})} />
+        <p>Value: {value}</p>
+        <p>Key pressed: {key}</p>
+      </div>
+
+    );
+  }
+});
+
+
+export default Textarea;

src/example/App/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Controllable from './Controllable';
 import Customizable from './Customizable';
 import UndoRedo from './UndoRedo';
+import Textarea from './Textarea';
 import css from './App.css';
 
 
@@ -22,6 +23,11 @@ const App = () => (
       <h2>Example 3. Undo-Redo</h2>
       <UndoRedo />
     </section>
+
+    <section className={css.section}>
+      <h2>Example 4. Debounced Textarea</h2>
+      <Textarea />
+    </section>
   </div>
 );