@render-props/throttle

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

Usage no npm install needed!

<script type="module">
  import renderPropsThrottle from 'https://cdn.skypack.dev/@render-props/throttle';
</script>

README

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.

State

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