@render-props/throttle NPM

Throttle

A state container which limits the frequency with which setState can be called using requestAnimationFrame.

This is a perfect component for capturing the state from events like scroll, keypress and size.

Throttling example image

Installation

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

Usage

import Throttle from '@render-props/throttle'


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

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.

Render Props

Methods

throttleState: this function is setState wrapped in a throttle function which uses requestAnimationFrame to limit the number of calls to setState. This is useful for reducing the burden of rapidly-fired events like scrolling.