Skip to content

Latest commit

 

History

History

throttle

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
es
es
 
 
src
src
 
 
.babelrc
.babelrc
 
 
.gitignore
.gitignore
 
 
.npmignore
.npmignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package.json
package.json
 
 
yarn-error.log
yarn-error.log
 
 
yarn.lock
yarn.lock
 
 

README.md

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