React component that renders Input with debounced onChange
Can be used as drop-in replacement for <input type="text" />
npm install --save react react-debounce-inputDon't forget to manually install peer dependencies (react) if you use npm@3.
bower install --save https://npmcdn.com/react-debounce-input/bower.zipor in bower.json
{
"dependencies": {
"react-debounce-input": "https://npmcdn.com/react-debounce-input/bower.zip"
}
}then include as
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react-debounce-input/build/react-debounce-input.js"></script><script src="https://npmcdn.com/react/dist/react.js"></script>
<script src="https://npmcdn.com/react-debounce-input/build/react-debounce-input.js"></script>
(Module exposed as `DebounceInput`)http://nkbt.github.io/react-debounce-input/example
http://codepen.io/nkbt/pen/VvmzLQ
import React from 'react';
import ReactDOM from 'react-dom';
import DebounceInput from 'react-debounce-input';
const App = React.createClass({
getInitialState() {
return {
value: ''
};
},
render() {
return (
<div>
<DebounceInput
minLength={2}
debounceTimeout={300}
onChange={event => this.setState({value: event.target.value})} />
<p>Value: {this.state.value}</p>
</div>
);
}
});
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);Function called when value is changed (debounced) with original event passed through
Value of the Input box. Can be omitted, so component works as usual non-controlled input.
Minimal length of text to start notify, if value becomes shorter then minLength (after removing some characters), there will be a notification with empty value ''.
Notification debounce timeout in ms. If set to -1, disables automatic notification completely. Notification will only happen by pressing Enter then.
Notification of current value will be sent immediately by hitting Enter key. Enabled by-default. Notification value follows the same rule as with debounced notification, so if Length is less, then minLength - empty value '' will be sent back.
NOTE if onKeyDown callback prop was present, it will be still invoked transparently.
Same as forceNotifyByEnter, but notification will be sent when focus leaves the input field.
<DebounceInput
onChange={event => this.setState({value: event.target.value})}
placeholder="Name"
className="user-name" />Will result in
<input type="text"
placeholder="Name"
className="user-name" />Currently is being developed and tested with the latest stable Node 5 on OSX and Windows.
Should be ok with Node 4, but not guaranteed.
To run example covering all DebounceInput features, use npm start, which will compile src/example/Example.js
git clone git@github.com:nkbt/react-debounce-input.git
cd react-debounce-input
npm install
npm start
# then
open http://localhost:8080npm test
# to run tests in watch mode for development
npm run test:dev
# to generate test coverage (./reports/coverage)
npm run test:covMIT