JSPM – use-lodash-debounce-throttle@0.3.5

Package Exports

use-lodash-debounce-throttle

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-lodash-debounce-throttle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

useDebounce: same as https://lodash.com/docs/4.17.11#debounce
useThrottle: same as https://lodash.com/docs/4.17.11#throttle

DEV

yarn install
yarn start