# React Window decorators

DevFeed: [React Window decorators](<https://devfeed.tech/articles/react-window-decorators-37334.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/react-decorators-and-scroll-manager/>)

Author: Stanko

Published: 2017-12-02T00:00:00Z

Content type: release

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [npm packages](<https://devfeed.tech/topics/npm-packages.md>)

Tags: [github](<https://devfeed.tech/tags/github.md>), [npm](<https://devfeed.tech/tags/npm.md>), [npm-packages](<https://devfeed.tech/tags/npm-packages.md>), [performance](<https://devfeed.tech/tags/performance.md>), [react](<https://devfeed.tech/tags/react.md>), [release](<https://devfeed.tech/tags/release.md>)

## AI overview

The article announces two npm packages: window-scroll-manager and react-window-decorators. The packages provide React decorators that track window scroll, size, orientation, and breakpoints, using custom events, requestAnimationFrame, and debounced resize updates to reduce performance issues.

## Source excerpt

Two days ago I released two npm packages, window-scroll-manager and react-window-decorators. Scroll manager # Scroll managerPlx uses the same scroll manager so I extracted it to the standalone package. is just a simple wrapper around scroll event, that broadcasts custom window-scroll event once per requestAnimationFrame. Idea comes from MDN. React decorators # or higher order components are the bees knees, as they bring easy way to track window scroll and resize events in React. They will track and inject props directly into React components. Check the demo. Two decorators included are: withScroll decorator # tracks and injects window scroll position (by using scroll manager) withWindow decorator # tracks and injects window size, orientation and breakpointUser needs to pass breakpoints definition. How do they work? # Both scroll and resize decorators are listening to custom events, rather than the native ones. This is because both scroll and resize eventsEspecially scroll event. are triggered a lot and can cause performance issues. That's why I introduced custom window-scroll and window-resize events. Plus, all updates are wrapped in requestAnimationFrame and resize event is debounced (configurable, 250ms by default). So the heavy lifting is done by scroll and window managers, which are both singletons, while the React decorators are slim components that inject props to the wrapped component. Please note that using withScroll on a lot of components can introduce performance issues. Then again ten-ish should work just fine. I used these on numerous projects, they are battle tested, but it took me some time to put in the effort to release them as a standalone package. Check the code # Of course, both packages are available on GitHub: Scroll manager React decorators