Make polyfill optional when using in old browsers

Hi there! First of all, thanks for providing the library - it’s excellent!

I have an idea that I’d like to vet with you. I recently used the lib in a website to make a sticky nav. To prevent the site from breaking I need to make it work in IntersectionObserver-less browsers (like IE). Now, I don’t actually care if the nav is sticky in these browsers, I just want my code to run. Adding the polyfill is of course an option, but there’s no optimal way of adding the polyfill without also affecting performance (slightly) for modern browser.

So here’s my idea: make the default behavior of the library so that it will report inView: true for browsers where IntersectionObserver isn’t supported. Optionally, we could hide it behind a configuration option of some sort. This will make more things just work™️ when the intersection observer behavior is an enhancement and not a requirement.

With a pointer or two, I’d be happy to come up with a PR for this.

[thebuilder]

Am I crazy here? For the moment I’m just going to use an error boundary, roughly like this:

import { ErrorBoundary } from 'react-error-boundary';

const LazyImageThatThrowsErrors = ({ src }) => {
  // This hook throws a runtime error if the browser doesn't support
  // IntersectionObserver.
  const [ref, inView] = useInView();
  return <img ref={ref} src={inView ? src : undefined} />;
};

const LazyImage = ({ src }) => {
  return (
    <ErrorBoundary FallbackComponent={() => <img src={src} />}>
      <LazyImageThatThrowsErrors src={src} />
    </ErrorBoundary>
  );
};

That might work? Honestly, I would just do a check for Intersection support, and adjust accordingly:

const Image= ({ src }) => {
  const [ref, inView] = useInView();
  const unsupported = typeof window.IntersectionObserver === 'undefined'
  
  return <img ref={!unsupported  ? ref : undefined} src={inView || unsupported  ? src : undefined} />;
};

As long as you don’t assign the ref, the hook will IntersectionObserver will never be instantiated. This example will fail if rendered serverside - Move the check into a useEffect if you need to do that.

[tshddx]

You’d wrap you application/component in an error boundary. But that would just stop it from breaking other parts of the application. I’m also not sure it would trigger the error boundary, since it happens as a side effect (not the render method itself).

My goal is to have browsers which don’t support IntersectionObserver to simply revert to normal <img src="foo.jpg" /> behavior.