Use intersection observer api with react and typescript

ReactJS, TypeScript, JavaScript | Fri Sep 20 2024 | 2 min read

We have learned about Intersection observer API in our last blog(https://techcookies.com/post/Understand-intersection-observer-api), you can refer for basics and details.
In this blog we'll learn how we can implement it in ReactJS using TypeScript.

Intersection observer API helps detect the visibility of an element, i.e. if it’s in the current viewport, and also the relative visibility of two elements in relationship to each other - triggering a callback function.

Use cases

Lazy loading of images.
Infinite scrolls.
Data pre-fetching.
To detect whether an ad was viewed or not.
To determine whether a user has read an article.
To run costly renderings and animations only when they are visible on the screen.

Basic Implementation

We can create one hook for Intersection observer API.

typescript

import { RefObject, useEffect, useState } from "react"

export function useIntersectionObserver(ref: RefObject<HTMLElement>, options: IntersectionObserverInit){
    const [isIntersecting, setIsIntersecting] = useState(false);
    useEffect(()=>{
        const observer = new IntersectionObserver(([entry])=>{
            setIsIntersecting(entry.isIntersecting);
        }, options);

        if (ref.current) {
            observer.observe(ref.current);
          }
      
          return () => {
            observer.unobserve(ref.current!);
          };
    }, []);

    return isIntersecting;
}

We can consume this custom hook in any react component.

typescript

"use client";
import { useRef } from "react";

import { useIntersectionObserver } from "./useIntersectionObserver";

const IntersectionApiComp = () => {
  const ref = useRef<HTMLDivElement>(null);
  const onScreen = useIntersectionObserver(ref, { threshold: 0.5 });

  return (
    <div>
      <div style={{ height: "100vh" }}>Scroll down</div>
      <div style={{ height: "100vh" }} ref={ref}>
        {onScreen ? (
          <>
            <img
              className="lazy-load"
              src="./image.jpg"
              alt="A beautiful scene"
            />
            <img
              className="lazy-load"
              src="./image2.jpg"
              alt="Another beautiful scene"
            />
          </>
        ) : null}
      </div>
    </div>
  );
};
export default IntersectionApiComp;