Skip to content

The throttle value / function hook for react

License

Notifications You must be signed in to change notification settings

react-cmpt/use-throttle

Repository files navigation

use-throttle

The throttled value / function hook for react

CI npm GitHub license minzip

Usage

Installation

yarn add @react-cmpt/use-throttle

codesandbox

Edit use-throttle-example

useThrottle

throttled value

option type default explain
value any - The value to throttle.
wait number 0 The number of milliseconds to throttle invocations to.
options leading boolean false Specify invoking on the leading edge of the timeout.
customizer function - The function to customize comparisons.
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

option type default explain
fn function - The function to throttle.
wait number 0 The number of milliseconds to throttle invocations to.
options leading boolean false Specify invoking on the leading edge of the timeout.
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