@znemz/debounce-handler

⌛ debounce-handler

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Helps to debounce handlers like onChange.

Install

yarn add @hocs/debounce-handler

Usage

debounceHandler(
  handlerName: string,
  delay?: number,
  leadingCall?: boolean
): HigherOrderComponent

import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import debounceHandler from '@hocs/debounce-handler';

const Demo = ({ count, onButtonClick }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={onButtonClick}>CLICK ME FAST</button>
  </div>
);

export default compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
  }),
  debounceHandler('onButtonClick', 300)
)(Demo);

📺 Check out live demo.