use-throttle

The throttled value / function hook for react

Usage

Installation

yarn add @react-cmpt/use-throttle

codesandbox

useThrottle

throttled value

| return | type | explain | | ----------- | -------- | -------------------------------- | | value | any | Returns the new throttled value. | | cancel | function | The clear timer function. | | callPending | function | The callback manually function. |

import { useThrottle } from "@react-cmpt/use-throttle";

const Demo = ({ value }) => {
  const [tValue, { cancel, callPending }] = useThrottle(value, 200);

  // ...
};

useThrottleFn

throttled function

| return | type | explain | | ----------- | -------- | ------------------------------- | | callback | function | The new throttled function. | | cancel | function | The clear timer function. | | callPending | function | The callback manually function. |

import { useThrottleFn } from "@react-cmpt/use-throttle";

const Demo = () => {
  const { callback, cancel, callPending } = useThrottleFn(() => {
    console.log("click");
  }, 200);

  return <button onClick={callback}>++</button>;
};

useDebounce, useDebounceCallback -> use-debounce

Dev

# build package
yarn build

# tests
yarn test

# lint
yarn lint

License

MIT