Switch branches/tags
with-view-layout-props@0.2.0 with-view-layout-props@0.1.3 with-view-layout-props@0.1.2 with-view-layout-props@0.1.1 with-view-layout-props@0.1.0 with-resize-observer-props@0.5.0 with-resize-observer-props@0.4.1 with-resize-observer-props@0.4.0 with-resize-observer-props@0.3.1 with-resize-observer-props@0.3.0 with-resize-observer-props@0.2.0 with-resize-observer-props@0.1.0 with-page-visibility-props@0.4.0 with-page-visibility-props@0.3.0 with-page-visibility-props@0.2.0 with-page-visibility-props@0.1.0 with-online-status-props@0.3.0 with-online-status-props@0.2.0 with-online-status-props@0.1.1 with-online-status-props@0.1.0 with-match-media-props@0.4.0 with-match-media-props@0.3.0 with-match-media-props@0.2.0 with-match-media-props@0.1.2 with-match-media-props@0.1.1 with-match-media-props@0.1.0 with-log@0.5.0 with-log@0.4.0 with-log@0.3.0 with-log@0.2.0 with-log@0.1.0 with-lifecycle@0.5.0 with-lifecycle@0.4.0 with-lifecycle@0.3.0 with-lifecycle@0.2.0 with-lifecycle@0.1.1 with-lifecycle@0.1.0 with-intersection-observer-props@0.5.0 with-intersection-observer-props@0.4.0 with-intersection-observer-props@0.3.0 with-intersection-observer-props@0.2.0 with-intersection-observer-props@0.1.0 with-debugger@0.4.0 with-debugger@0.3.0 with-debugger@0.2.0 with-debugger@0.1.0 with-callback-once@0.3.0 with-callback-once@0.2.0 with-callback-once@0.1.0 with-callback-on-change@0.3.0 with-callback-on-change@0.2.0 with-callback-on-change@0.1.0 with-callback-on-change-while@0.3.0 with-callback-on-change-while@0.2.0 with-callback-on-change-while@0.1.0 throttle-handler@0.5.0 throttle-handler@0.4.0 throttle-handler@0.3.0 throttle-handler@0.2.1 throttle-handler@0.1.1 throttle-handler@0.1.0 safe-timers@0.4.0 safe-timers@0.3.0 safe-timers@0.2.0 safe-timers@0.1.0 prevent-handlers-default@0.4.0 prevent-handlers-default@0.3.0 prevent-handlers-default@0.2.1 prevent-handlers-default@0.1.0 omit-props@0.4.0 omit-props@0.3.0 omit-props@0.2.1 omit-props@0.1.1 omit-props@0.1.0 debounce-handler@0.5.0 debounce-handler@0.4.1 debounce-handler@0.4.0 debounce-handler@0.3.0 debounce-handler@0.2.1 debounce-handler@0.1.1 debounce-handler@0.1.0
Nothing to show
Find file History
Permalink
..
Failed to load latest commit information.
demo 📺 debounce-handler: update demo Aug 29, 2018
src fix lint Aug 28, 2018
test 🚷 fix ESLint errors Aug 29, 2018
package.json 📦 debounce-handler: v0.5.0 Aug 29, 2018
readme.md 📝 debounce-handler: update readme Aug 29, 2018

readme.md

⌛️ debounce-handler

npm ci coverage deps

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|function<props>,
  leadingCall?: boolean
): HigherOrderComponent
import React from 'react';
import { compose, withState, withHandlers } from 'recompose';
import debounceHandler from '@hocs/debounce-handler';

const Demo = ({ count, onButtonClick, label }) => (
  <div className='demo'>
    {label || ''}
    <h1>{count}</h1>
    <button onClick={onButtonClick}>CLICK ME FAST</button>
  </div>
)

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

const Demo2 = compose(
  withState('count', 'setCount', 0),
  withHandlers({
    onButtonClick: ({ count, setCount }) => () => setCount(count + 1)
  }),
  debounceHandler('onButtonClick', (props) => props.debounce || 0)
)(Demo)

const MainDemo = () => (
  <div>
    <style>
      {
        `.demo {
          margin-bottom: 10px;
          border-style: dotted;
          border-radius: 10px;
          padding: 5px;
        }`
      }
    </style>
    <Demo1 label='Delay as argument' />
    <Demo2 label='Delay from props' debounce={300} />
    <Demo2 label='No delay (zero by default)' />
  </div>
)

export default MainDemo

📺 Check out live demo.