Older Browsers

Older browsers might be supported, depending on the React version you are using. React 18 dropped support for Internet Explorer, but you can keep using React 17 to overcome this.

Emotion, the companion dependency of React Awesome Reveal, currently supports older browsers, including Internet Explorer 11. However, this might change in future updates of the library.

In any case, the Intersection Observer API is not supported on older browsers, so you will need to polyfill it.

Polyfilling the Intersection Observer API

You can add the polyfill for the Intersection Observer API directly or by using a service like polyfill.io to inject it when needed:

npm install intersection-observer

pnpm add intersection-observer

yarn add intersection-observer

Then import it in your app:

import "intersection-observer";

Dynamic Import

If you are using Vite, Webpack, Parcel or any other modern bundler, you can also use dynamic import to load the polyfill only if needed. A basic implementation could look something like this:

// Do feature detection, to figure out which polyfills needs to be imported
async function loadPolyfills() {
  if (typeof window.IntersectionObserver === "undefined") {
    await import("intersection-observer");
  }
}