use-lodash-debounce-throttle
TypeScript icon, indicating that this package has built-in type declarations

0.3.5 • Public • Published

Bring debounce & throttle of lodash version to react-hooks.

useDebounce & useThrottle will auto create, update and cancel debounced & throttled instance, so you do not need to cancel manually.

demo

https://frezc.github.io/use-lodash-debounce-throttle/

usage

install

yarn add use-lodash-debounce-throttle

useDebounce

import { useDebounce } from 'use-lodash-debounce-throttle';
 
const Com = () => {
  const debouncedChange = useDebounce((v) => {
    postUpdate();
  }, 500, { maxWait: 2000 });
 
  return (
    <input
      type="text"
      onChange={(e) => {
        debouncedChange(e.target.value)
      }}
    />
  )
}

useThrottle

import { useThrottle } from 'use-lodash-debounce-throttle';
 
const Com = () => {
  const debouncedChange = useThrottle((v) => {
    sendMessage();
  }, 500, { leading: false });
 
  return (
    <input
      type="text"
      onChange={(e) => {
        debouncedChange(e.target.value)
      }}
    />
  )
}

API

DEV

yarn install
yarn start

Package Sidebar

Install

npm i use-lodash-debounce-throttle

Weekly Downloads

1,282

Version

0.3.5

License

MIT

Unpacked Size

20.4 kB

Total Files

26

Last publish

Collaborators

  • frezc