@render-props/throttle
v0.1.18
Published
A state container which limits the frequency with which setState can be called using `requestAnimationFrame`.
Downloads
1,056
Maintainers
jaredlundeReadme
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.
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 usesrequestAnimationFrameto 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 thethrottleStatemethod, this component provides the state exactly as its been set usingthrottleState