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

1import React from 'react';
2import useDebounce from 're-use-debounce';
3
4function MyComponent(props) {
5  const [value, setValue] = React.useState('');
6
7  const [debouncedValue, setDebouncedValue] = React.useState('');
8  useDebounce(value, setDebouncedValue, 300);
9
10  React.useEffect(() => {
11    console.log(`debouncedValue: ${debouncedValue}`);
12  }, [debouncedValue])
13
14  return (
15    <input value={value} onChange={event => setValue(event.target.value)} />
16  );
17}

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