re-use-debounce
v0.0.1
Published
Reuse lodash debounce as React hook
Downloads
6
Readme
re-use-debounce
Reuse lodash debounce as React hook
Install
$ npm install re-use-debounce
Note: This libaray expects that you already depend on lodash 4.
Usage
import React from 'react';
import useDebounce from 're-use-debounce';
function MyComponent(props) {
const [value, setValue] = React.useState('');
const [debouncedValue, setDebouncedValue] = React.useState('');
useDebounce(value, setDebouncedValue, 300);
React.useEffect(() => {
console.log(`debouncedValue: ${debouncedValue}`);
}, [debouncedValue])
return (
<input value={value} onChange={event => setValue(event.target.value)} />
);
}
API
useDebounce(input, onChange, delay, [options])
input
Type: any
The value that is being debounced
onChange
Type: function
The function to debounce
delay
Type: number
The number of milliseconds to debounce
options
Type: Object
leading
Type: boolean
Default: false
Specify invoking on the leading edge of the timeout.
trailing
Type: boolean
Default: true
Specify invoking on the trailing edge of the timeout.
maxWait
Type: number
Default: undefined
The maximum time onChange
is allowed to be delayed before it's invoked.
License
MIT © Sindre Seppola