@render-props/throttle
Version:
A state container which limits the frequency with which setState can be called using `requestAnimationFrame`.
58 lines (42 loc) • 1.71 kB
Markdown
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.
```yarn add @render-props/throttle``` or ```npm i @render-props/throttle```
____
```js
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>
)
}
```
____
- `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.
- `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 {object}`: in addition to the `throttleState` method, this component provides the state exactly as its been set using `throttleState`