# @render-props/throttle > A state container which limits the frequency with which setState can be called using `requestAnimationFrame`. Latest version **0.1.18** (published 2019-04-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @render-props/throttle pnpm add @render-props/throttle yarn add @render-props/throttle bun add @render-props/throttle ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.18 | | Published | 2019-04-06 | | First published | 2018-02-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 10.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 36 | | Author | Jared Lunde | | Maintainers | jaredlunde | | Keywords | react, render props, function as child, hoc, state container, throttle, requestAnimationFrame | ## Links - npm: https://www.npmjs.com/package/@render-props/throttle - Repository: https://github.com/jaredlunde/render-props/tree/master/packages/throttle - npm.io page: https://npm.io/package/@render-props/throttle ## Dependencies (2) - [raf](https://npm.io/package/raf.md) ^3.4.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.18 (latest) — 2019-04-06 - 0.1.17 — 2019-04-06 - 0.1.16 — 2019-03-20 - 0.1.15 — 2019-01-31 - 0.1.14 — 2019-01-12 - 0.1.13 — 2018-12-29 - 0.1.12 — 2018-09-11 - 0.1.11 — 2018-09-10 - 0.1.10 — 2018-08-21 - 0.1.9 — 2018-08-20 - 0.1.8 — 2018-08-18 - 0.1.7 — 2018-08-18 - 0.1.6 — 2018-08-18 - 0.1.5 — 2018-03-22 - 0.1.4 — 2018-02-08 - … 4 more at https://npm.io/package/@render-props/throttle/versions ## 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](https://image.slidesharecdn.com/5fastcordova-140116132650-phpapp02/95/fast-cordova-applications-27-638.jpg?cb=1389879297) ### Installation ```yarn add @render-props/throttle``` or ```npm i @render-props/throttle``` ____ ## Usage ```js import Throttle from '@render-props/throttle' function ThrottledBodyScroller () { return ( {({throttleState, state}) => ( throttleState( prevState => ( window.scrollY > 30 ? {gt30: true, scrollY: window.scrollY} : {gt30: false, scrollY: window.scrollY} ) ) } > Greater than 30? {String(state.gt30)} )} ) } ``` ____ ## 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` --- _Source: https://npm.io/package/@render-props/throttle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._