react-intersection-observer

If a client's browser does not support IntersectionObserver, the library throws an error by default. You can prevent this by setting a fallback inView value.

Global Fallback

Set a global fallback value (either true or false) using defaultFallbackInView in a setup file.

import { defaultFallbackInView } from "react-intersection-observer";

defaultFallbackInView(true);

Local Fallback

Override the global setting for a specific hook or component using the fallbackInView option.

import React from "react";
import { useInView } from "react-intersection-observer";

const Component = () => {
  const { ref, inView } = useInView({
    fallbackInView: true,
  });

  return (
    <div ref={ref}>
      <h2 className={`Header inside viewport ${inView}.`}/>
    </div>
  );
};

import { defaultFallbackInView } from "react-intersection-observer";

defaultFallbackInView(true); // or `false`

// OR locally in a component:
const { ref, inView } = useInView({
  fallbackInView: true,
});

To track when a user views a specific element (e.g., for analytics or marketing impressions), use the useOnInView hook. This hook accepts a callback function that is executed whenever the visibility state changes.

• Callback logic: Inside the callback, check the inView boolean. If true, fire your tracking event (e.g., a Google Tag Manager dataLayer.push).
• triggerOnce: Set to true to ensure the impression is only tracked once per page load.
• threshold or rootMargin: Use these to define exactly when the element is considered "viewed".

import * as React from "react";
import { useOnInView } from "react-intersection-observer";

const TrackImpression = () => {
  const ref = useOnInView((inView) => {
      if (inView) {
          // Fire a tracking event to your tracking service of choice.
          dataLayer.push("Section shown"); // Here's a GTM dataLayer push
      }
  }, {
    triggerOnce: true,
    rootMargin: "-100px 0",
  });

  return (
    <div ref={ref}>
      Exemplars sunt zeluss de bassus fuga. Credere velox ducunt ad audax amor.
    </div>
  );
};

export default TrackImpression;

Use the useInView hook to trigger CSS transitions or animations when an element enters the viewport.

• triggerOnce: Set to true if you want the animation to fire only the first time the element becomes visible.
• threshold: Use this to control how much of the element must be visible before the animation triggers.
• rootMargin: Alternatively, use rootMargin to trigger the animation at a specific distance from the viewport edge. Using a negative margin (e.g., -100px 0px) will cause the animation to trigger only after the element has moved a certain distance into the viewport.

import React from "react";
import { useInView } from "react-intersection-observer";

const LazyAnimation = () => {
  const { ref, inView } = useInView({
    triggerOnce: true,
    rootMargin: "-100px 0px",
  });

  return (
    <div
      ref={ref}
      className={`transition-opacity ${inView ? "opacity-1" : "opacity-0"}`}
    >
      <span aria-label="Wave">👋</span>
    </div>
  );
};

export default LazyAnimation;

You can create a custom lazy image loader by using the useInView hook. To ensure a smooth user experience and prevent layout shifts, follow these best practices:

• Delay src assignment: Do not set the src or srcset on the <img> tag until inView is true. Images will load even if they are hidden with display: none;.
• Use rootMargin: Set a positive rootMargin (e.g., 200px 0px) so the image begins loading before it actually enters the viewport.
• Use triggerOnce: Set triggerOnce: true to stop monitoring the element once it has been loaded.
• Maintain Aspect Ratio: Wrap the image in a container that preserves the aspect ratio using padding-bottom (calculated as (height / width) * 100%) to prevent layout jumps when the image loads.

Note: For simple use cases, consider using the native browser loading="lazy" attribute instead.

import React from "react";
import { useInView } from "react-intersection-observer";

const LazyImage = ({ width, height, src, ...rest }) => {
  const { ref, inView } = useInView({
    triggerOnce: true,
    rootMargin: "200px 0px",
  });

  return (
    <div
      ref={ref}
      style={{
        position: "relative",
        paddingBottom: `${(height / width) * 100}%`,
        background: "#2a4b7a",
      }}
    >
      {inView ? (
        <img
          {...rest}
          src={src}
          width={width}
          height={height}
          style={{ position: "absolute", width: "100%", height: "100%" }}
        />
      ) : null}
    </div>
  );
};

export default LazyImage;

The useOnInView hook is a performance-optimized alternative to useInView. It does not trigger component re-renders. Instead, it accepts a callback function that is executed whenever the element enters or leaves the viewport.

Key characteristics:

• No re-renders: Ideal for performance-critical scenarios (e.g., logging impressions).
• Direct element access: The callback receives the IntersectionObserverEntry containing the target element.
• Boolean-first callback: The callback signature is (inView, entry) => void.
• Options: Accepts the same options as useInView except onChange, initialInView, and fallbackInView.

Note: Like useInView, the initial false notification is skipped.

import React from "react";
import { useOnInView } from "react-intersection-observer";

const Component = () => {
  // Track when element appears without causing re-renders
  const trackingRef = useOnInView(
    (inView, entry) => {
      if (inView) {
        // Element is in view - perhaps log an impression
        console.log("Element appeared in view", entry.target);
      } else {
        console.log("Element left view", entry.target);
      }
    },
    {
      /* Optional options */
      threshold: 0.5,
      triggerOnce: true,
    },
  );

  return (
    <div ref={trackingRef}>
      <h2 >This element is being tracked without re-renders</h2>
    </div>
  );
};