re-use-debounce

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