useIsInViewport - a React Hook to detect if an HTML element is visible on screen

index.ts

// How to use it

export default function MyComponent(): JSX.Element {
  const containerRef = useRef<HTMLDivElement>(null);
  const isInViewport = useIsVisibleOnScreen(containerRef, '50px');
    
  return (
    <div ref={containerRef}>
      <h1>{isInViewport ? 'Visible' : 'Not visible'}</h1>
    </div>
  );
}

useIsInViewport.ts

import { MutableRefObject, useEffect, useMemo, useState } from 'react';

export function useIsVisibleOnScreen(
  ref: MutableRefObject<HTMLElement | null>,
  rootMargin = '0px',
): boolean {
  const [isVisible, setIsVisible] = useState(false);

  const observer = useMemo(
    () =>
      new IntersectionObserver(
        ([entry]) => setIsVisible(entry.isIntersecting),
        { rootMargin },
      ),
    [rootMargin],
  );

  useEffect(() => {
    const currentElement = ref?.current;
    if (currentElement) {
      observer.observe(currentElement);
    }

    return () => {
      observer.disconnect();
    };
  }, [ref, observer]);

  return isVisible;
}