dlavrenuek
Universal debounce hook for React
Universal useDebounce hook which can be used for any debounced action. Only
the last provided callback will be executed after a given timeout.
Installation
Install with yarn
yarn add react-debouncedInstall with npm
npm install react-debouncedExample usage
Import the hook first
import useDebounce from 'react-debounced';Use it in your functional components:
`typescript jsx
const Test = () => {
const debounce = useDebounce();
const [value, setValue] = useState('');
const [debounced, setDebounced] = useState('');
const handleInput = (e) => { const { value } = e.target; setValue(value); debounce(() => { // any functionality, like triggering api calls or setting a state, can be used here console.log('Debounced'); setDebounced(value); }); };
return ( <>
Value: {value}
Debounced: {debounced}
<input placeholder="Fill me out" value={value} onChange={handleInput} /> </> ); };
### Options
`useDebounce` has only one optional parameter `timeout`, which is set to 250ms per default.
#### Example with a 100 milliseconds timeout
```typescript jsx
const debounce = useDebounce(100);Multiple debounce in one component
Each call of useDebounce inside a component will return a debounce function with its own timeout.
If you need to debounce multiple input fields, just use:
typescript jsx
const debounceOne = useDebounce();
const debounceTwo = useDebounce();