Gracefully handle environments without IntersectionObserver
joaovieira opened this issue · comments
This module assumes IntersectionObserver is available as a global - the polyfill is actually required. However, there may be situations where we want to do progressive enhancement and only observe elements if it's available.
I was wondering if this has already been discussed and if we could gracefully fail if IntersectionObserver doesn't exist instead of throwing.
Expected behavior
Exception not thrown. Page scrolls as normal without any callbacks being triggered (as if <Observer> wasn't there).
Current behavior
Exception is thrown (IntersectionObserver is not declared).
Steps to reproduce
Use <Observer> on Safari/iOS.
In cases where you don't want to rely on the polyfill but instead fail gracefully, you could create your own custom component that plays exactly the Expected behavior. This component would just render the passed children while ignoring the other props if IntersectionObserver isn't available or render the <Observer> with all the props if it is.
To detect if the IntersectionObserver API exists in the environment, you can rely on the same check the polyfill performs.
I've created a piece of documentation to showcase how to accomplish this: https://github.com/researchgate/react-intersection-observer/tree/master/docs/docs/components/NativeObserver