The throttled value / function hook for react
yarn add @react-cmpt/use-throttle
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); // ... };
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
# build package yarn build # tests yarn test # lint yarn lint