@react-cmpt/use-throttle

The throttled value / function hook for react

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@react-cmpt/use-throttle
400.3.39 months ago2 years agoMinified + gzip package size for @react-cmpt/use-throttle in KB

Readme

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

| 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
<th colspan="2">option</th>
<th>type</th>
<th>default</th>
<th>explain</th>
<td colspan="2">fn</td>
<td>function</td>
<td>-</td>
<td>The function to throttle.</td>
<td colspan="2">wait</td>
<td>number</td>
<td>0</td>
<td>The number of milliseconds to throttle invocations to.</td>
<td rowspan="1">options</td>
<td>leading</td>
<td>boolean</td>
<td><code>false</code></td>
<td>Specify invoking on the leading edge of the timeout.</td>

| 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