Advanced Concepts

This section lists some useful insights in order to get the best from react-awesome-reveal.

Intersection Observer#

Intersection Observer is the API used to determine if an element is inside the viewport or not. Browser support is really good – with Safari adding support in 12.1, all major browsers now support Intersection Observers natively.

If you need to support old browsers, add the polyfill for the Intersection Observer API.

Polyfill#

You can add the polyfill directly or use a service like polyfill.io to add it when needed.

npm
Yarn

npm install --save intersection-observer

Then import it in your app:

import "intersection-observer";

If you are using Webpack (or similar) you could use dynamic imports 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");
  }
}