React Window decorators

02 Dec 2017

Two days ago I released two npm packages, window-scroll-manager and react-window-decorators.

Scroll manager

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.

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 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 scroll and resize events Especially 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