React scroll decorator
Check this post for updated, more performant version.
This decorator is not listening to a scroll event, as that is the performance killer (especially when you push it to react lifecycle). Instead, it is using interval to check if scroll position has changed. To keep it performant, I'm using
requestAnimationFrame. Interval is only there to throttle animation frame from triggering too often.
Please note that it still may cause performance issues if you apply it to a large number of components. Personally, I never had to apply it to a more than three of four per page.
So here it is:
; ; ;
Import the decorator and apply it to your component, easy-peasy.
This will inject
scrollPosition to it's props.