throttle-hooks
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

throttle-hooks for React

NPM version License

Installation

npm i throttle-hooks

Usage

Package contains 2 hooks:

  • useThrottle
  • useDebounce

Throttling

useThrottle() accepts 3 optional arguments:

  • wait - number in miliseconds. Default is 400
  • leading - boolean. Default is false
  • trailing - boolean. Default is false

useThrottle(wait, leading, trailing) returns function setter, which you can use anywhere in your component.

import { useThrottle } from 'throttle-hooks';

const throttle = useThrottle(400, true, false);

// With arrow function
throttle(() => {
  // Express yourself...
});

// Or by invoking named function
throttle(expressYourself);
// You can also submit custom scope and arguments
throttle(expressYourself, scope, args);

You can use as many useThrottle hooks as you like. Each hook is independent.

Component example:

import { useState } from 'react';
import { useThrottle } from 'throttle-hooks';

export default function SomePage() {
  const [numClicks, setNumClicks] = useState(0);
  const throttle = useThrottle(1000);

  const handleClick = () => {
    const updatedClicks = numClicks + 1;
    setNumClicks(updatedClicks);

    throttle(() => {
      console.log('Recevied:', updatedClicks, 'clicks');
    });
  }

  return (
    <div>
      <h1>Hello!</h1>
      <p>You clicked: { numClicks } times.</p>
      <button onClick={ handleClick }>
        Click
      </button>
    </div>
  )
}

Debouncing

useDebounce() accepts 2 optional arguments:

  • wait - number in miliseconds. Default is 400
  • leading - boolean. Default is false

useDebounce(wait, leading) returns function setter, which you can use anywhere in your component.

import { useDebounce } from 'throttle-hooks';

const debounce = useDebounce(400, true);

// With arrow function
debounce(() => {
  // Express yourself...
});

// Or by invoking named function
debounce(expressYourself);
// You can also submit custom scope and arguments
debounce(expressYourself, scope, args);

You can use as many useDebounce hooks as you like. Each hook is independent.

Component example:

import { useState } from 'react';
import { useDebounce } from 'throttle-hooks';

export default function SomePage() {
  const [numClicks, setNumClicks] = useState(0);
  const debounce = useDebounce(1000);

  const handleClick = () => {
    const updatedClicks = numClicks + 1;
    setNumClicks(updatedClicks);

    debounce(() => {
      console.log('Recevied:', updatedClicks, 'clicks');
    });
  }

  return (
    <div>
      <h1>Hello!</h1>
      <p>You clicked: { numClicks } times.</p>
      <button onClick={ handleClick }>
        Click
      </button>
    </div>
  )
}

Further reading

License

MIT

Copyright

Copyright 2021-present Mark Khramko

/throttle-hooks/

    Package Sidebar

    Install

    npm i throttle-hooks

    Weekly Downloads

    17

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    22.5 kB

    Total Files

    11

    Last publish

    Collaborators

    • markkhramko