@render-props/debounce

v0.1.6

A state container which limits the frequency with which setState can be called using lodash's debounce function. By default, `setState` is invoked on the trailing edge of the debounce call. If `leading` and `trailing` options are `true`, func is invoked

react render props function as child hoc state container debounce

Readme Versions Dependencies Scripts

Debounce

A state container which limits the frequency with which setState can be called using lodash's debounce function. By default, setState is invoked on the trailing edge of the debounce call. If leading and trailing options are true, func is invoked on the trailing edge of the timeout only if the debounced function is invoked more than once during the wait timeout.

See lodash's documentation for more details

Debouncing example image

Installation

yarn add @render-props/debounce or npm i @render-props/debounce

Usage

import Debounce from '@render-props/debounce'


function DebouncedBodyScroller () {
  return (
    <Debounce initialState={{scrollY: 0, gt30: false}}>
      {({debounceState, state}) => (
        <body
          onScroll={
            e => debounceState(
              prevState => (
                window.scrollY > 30
                ? {gt30: true, scrollY: window.scrollY}
                : {gt30: false, scrollY: window.scrollY}
              )
            )
          }
        >
          Greater than 30? {String(state.gt30)}
        </body>
      )}
    </Debounce>
  )
}

Props

initialState {object}: the state which this component should initialize with. This component is NOT controlled so you cannot update the state of this component by changing the property value here.
wait {number}: number of milliseconds to delay
maxWait {number}: maximum time func is allowed to be delayed before it's invoked
leading {bool}: invokes function on the leading edge of the timeout
traililng {bool}: invokes function on the trailing edge of the timeout

Render Props

Methods

debounceState: this function is setState wrapped in lodash's debounce function.

State

state {object}: in addition to the debounceState method, this component provides the state exactly as its been set using debounceState

npm i @render-props/[email protected]

Source Code

github.com/jaredlunde/render...

Metadata

MIT
Whatever
Jared Lunde
released 8/20/2018

Downloads

Maintainers

jaredlunde