use-throttle

The throttled value / function hook for react

Usage

Installation

yarn add @react-cmpt/use-throttle

codesandbox

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