React Window decorators
Two days ago I released two npm packages, window-scroll-manager and react-window-decorators.
Scroll manager (Plx 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.
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:
tracks and injects window scroll position (by using scroll manager)
tracks and injects window size, orientation and breakpoint (User 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
resize events (Especially scroll event.) are triggered a lot and can cause performance issues.
That's why I introduced custom
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: