⏳ React use debounce

React hook that safely add debounce to any kind of handler.

Installation

npm install @soywod/react-use-debounce
# or
yarn add @soywod/react-use-debounce

Definition

type UseDebounce = <T extends Function>(
  fn: T,
  opts?: number | Partial<DebounceOpts>,
) => Debounce<T>

type DebounceOpts = {
  delay: number
  persist: boolean
}

type Debounce<T extends Function> = {
  (...params: Parameters<T>): void
  abort: () => void
  terminate: () => void
}

Usage

import useDebounce from "@soywod/react-use-debounce"

function Component() {
  const handler = useDebounce(() => console.log("Hello!"))

  return (
    <>
      <button onClick={handler}>
        Say hello with delay
      </button>
      <button onClick={handler.abort}>
        Abort
      </button>
      <button onClick={handler.terminate}>
        Terminate
      </button>
    </>
  )
}

Development

git clone https://github.com/soywod/react-use-debounce.git
cd react-use-debounce
yarn install

Tests

yarn test