File "useIntersectionObserver.ts"

Full Path: /home/trinadezambia/public_html/student_panel/src/components/hooks/useIntersectionObserver.ts
File size: 1.29 KB
MIME-type: text/x-java
Charset: utf-8

import { useRef, useState, useCallback } from 'react';

interface UseIntersectionObserverArgs extends IntersectionObserverInit {
  freezeOnceVisible?: boolean;
}

export function useIntersectionObserver({
  threshold = 0,
  root = null,
  rootMargin = '0%',
  freezeOnceVisible = false,
}: UseIntersectionObserverArgs = {}): [
  (node: Element | null) => void,
  IntersectionObserverEntry | undefined
] {
  const [entry, setEntry] = useState<IntersectionObserverEntry>();
  const [node, setNode] = useState<Element | null>(null);
  const observer = useRef<IntersectionObserver | null>(null);

  const frozen = entry?.isIntersecting && freezeOnceVisible;

  // Callback ref to handle node mounting/unmounting
  const ref = useCallback((node: Element | null) => {
    setNode(node);
  }, []);

  // Update observer when node or params change
  if (
    typeof window !== 'undefined' &&
    window.IntersectionObserver &&
    node &&
    !frozen
  ) {
    // Disconnect previous observer
    if (observer.current) {
      observer.current.disconnect();
    }

    // Create new observer
    observer.current = new IntersectionObserver(
      ([entry]) => {
        setEntry(entry);
      },
      { threshold, root, rootMargin }
    );

    // Observe node
    observer.current.observe(node);
  }

  return [ref, entry];
}