react-use-debouncer's Introduction

react-use-debouncer

A simple debounced state hook that I use on some of my projects.

Install with npm:
npm i --save react-use-debouncer

or via yarn:
yarn i react-use-debouncer

Features

Debounced state
Cancelable debounced callback function

Docs

useDebouncedState

const [state, setState] = useDebouncedState(initialValue, delay);

initialValue: The initial value that state is initialized with
delay(optional): Number indicating the milliseconds to wait before setting state

Returns an array containing the debounced state and a setState function.

ex: [state, setState]

useDebouncedCallback

const [debouncedCallback, cancelCallback] = useDebouncedCallback(callback, delay);

callback: Callback function to be debounced
delay(optional): Number indicating the milliseconds to wait before calling the function

Returns an array containing the debounced callback function and a cancel function

ex: [debouncedCallback, cancelCallback]

Usage

useDebouncedState

import { useDebouncedState } from 'react-use-debouncer';

const useStateExample = () => {
  const [state, setState] = useDebouncedState('Initial');

  return (
    <div className="App">
      <span>{state}</span>
      <input onChange={({ target: { value } }) => setState(value)} />
    </div>
  );
};

Or check it out on CodeSandbox

useDebouncedCallback

import { useDebouncedCallback } from 'react-use-debouncer';

const sampleFunction = () => console.log('There should be a delay before I appear!');

const useCallbackExample = () => {
  const [debouncedCallback, cancelCallback] = useDebouncedCallback(sampleFunction);

  return <button onClick={() => debouncedCallback()}>Click Me!</button>;
};

Future

Leading & trailing options
Better CodeSandBox examples
Better docs

react-use-debouncer's People

Contributors

Stargazers

Watchers

react-use-debouncer's Issues

Add TypeScript definitions

Hey, it would be cool if this package added some TypeScript definitions
They're pretty easy to add, and I can do it, but I guess it depends on the outcome of #5