Gathering detailed insights and metrics for react-debounce-input
Gathering detailed insights and metrics for react-debounce-input
Gathering detailed insights and metrics for react-debounce-input
Gathering detailed insights and metrics for react-debounce-input
react-debounce-input-pro
A lightweight React component for debounced input handling, with full TypeScript support.
@petrican/react-debounce-input
React component that renders Input with debounced onChange - fork
@n3/react-debounce-input
Debounce input component for react applications based on @n3/kit
react-native-debounce-input
React Native component that renders an Input with delayed onChangeText
React component that renders Input with debounced onChange
npm install react-debounce-input
Typescript
Module System
Node Version
NPM Version
96.2
Supply Chain
99.1
Quality
75.7
Maintenance
100
Vulnerability
99.6
License
JavaScript (94.32%)
TypeScript (4.59%)
CSS (1.09%)
Total Downloads
67,258,287
Last Day
15,628
Last Week
455,265
Last Month
1,960,721
Last Year
19,924,046
MIT License
451 Stars
583 Commits
61 Forks
8 Watchers
3 Branches
17 Contributors
Updated on Jul 01, 2025
Minified
Minified + Gzipped
Latest Version
3.3.0
Package Id
react-debounce-input@3.3.0
Unpacked Size
63.60 kB
Size
15.31 kB
File Count
10
NPM Version
8.3.2
Node Version
16.13.2
Cumulative downloads
Total Downloads
Last Day
12.7%
15,628
Compared to previous day
Last Week
-9.1%
455,265
Compared to previous week
Last Month
0.4%
1,960,721
Compared to previous month
Last Year
33.1%
19,924,046
Compared to previous year
2
1
30
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 />
http://nkbt.github.io/react-debounce-input
http://codepen.io/nkbt/pen/VvmzLQ
1npm install --save react-debounce-input
1yarn add react-debounce-input
1<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script> 2<script src="https://unpkg.com/react-debounce-input/build/react-debounce-input.js"></script> 3(Module exposed as `DebounceInput`)
1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import {DebounceInput} from 'react-debounce-input'; 4 5class App extends React.Component { 6 state = { 7 value: '' 8 }; 9 10 render() { 11 return ( 12 <div> 13 <DebounceInput 14 minLength={2} 15 debounceTimeout={300} 16 onChange={event => this.setState({value: event.target.value})} /> 17 18 <p>Value: {this.state.value}</p> 19 </div> 20 ); 21 } 22} 23 24const appRoot = document.createElement('div'); 25document.body.appendChild(appRoot); 26ReactDOM.render(<App />, appRoot);
element
: PropTypes.string or React.PropTypes.func (default: "input")You can specify element="textarea". For Example:
1<DebounceInput element="textarea" />
Will result in
1<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:
1<DebounceInput element={CustomReactComponent} />
Will result in
1<CustomReactComponent />
onChange
: PropTypes.func.isRequiredFunction called when value is changed (debounced) with original event passed through
value
: PropTypes.stringValue of the Input box. Can be omitted, so component works as usual non-controlled input.
minLength
: PropTypes.number (default: 0)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 ''
.
debounceTimeout
: PropTypes.number (default: 100)Notification debounce timeout in ms. If set to -1
, disables automatic notification completely. Notification will only happen by pressing Enter
then.
forceNotifyByEnter
: PropTypes.bool (default: true)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.
forceNotifyOnBlur
: PropTypes.bool (default: true)Same as forceNotifyByEnter
, but notification will be sent when focus leaves the input field.
inputRef
: PropTypes.func (default: undefined)Will pass ref={inputRef}
to generated input element. We needed to rename ref
to inputRef
since ref
is a special prop in React and cannot be passed to children.
See ./example/Ref.js for usage example.
<input>
1<DebounceInput 2 type="number" 3 onChange={event => this.setState({value: event.target.value})} 4 placeholder="Name" 5 className="user-name" />
Will result in
1<input 2 type="number" 3 placeholder="Name" 4 className="user-name" />
This library has typescript typings, import them the same way as in javascript:
1import {DebounceInput} from 'react-debounce-input';
Also there are helper types DebounceTextArea
and Debounced
to provide strict interfaces for wrapping components different from standard <input />
. Check usage examples in example/typescript-example.tsx
.
NOTE library author is not using Typescript, so if you are using typings and found an issue, please submit a PR with fix. Thanks @iyegoroff for the initial TS support!
Currently is being developed and tested with the latest stable Node
on OSX
.
To run example covering all DebounceInput
features, use yarn start
, which will compile example/Example.js
1git clone git@github.com:nkbt/react-debounce-input.git 2cd react-debounce-input 3yarn install 4yarn start 5 6# then 7open http://localhost:8080
1# to run ESLint check 2yarn lint 3 4# to run tests 5yarn test
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 3/15 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
47 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More