useIntersectionObserver

index.tsx

import { useEffect } from "react";
import type { UseIntersectionObserverParameters } from "./types";

export const useIntersectionObserver = ({
  observableRef,
  callback,
  options,
}: UseIntersectionObserverParameters) => {
  useEffect(() => {
    const intersectionObserver = new IntersectionObserver(
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          callback();
        }
      },
      {
        rootMargin: "500px",
        threshold: 0,
        ...options,
      }
    );

    if (observableRef.current) {
      intersectionObserver.observe(observableRef.current);
    }

    return () => {
      if (observableRef.current) {
        intersectionObserver.unobserve(observableRef.current);
      }
    };
  }, [callback]);
};

types.ts

import type { RefObject } from "react";

export interface UseIntersectionObserverParameters {
  observableRef: RefObject<HTMLElement>;
  callback: () => void;
  options?: IntersectionObserverInit;
}