@hocs/debounce-handler

    0.5.0 • Public • Published

    ⌛️ 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.

    Install

    npm i @hocs/debounce-handler

    DownloadsWeekly Downloads

    1,025

    Version

    0.5.0

    License

    MIT

    Unpacked Size

    13.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • hocs