intersection-observer-hooks

import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"

API:

useIntersectionObserver(callback, nodeRef, options = {})

callback: returns a bool of when isIntersecting

options: Object
options.once: observe once then unobserve options.rootMargin: the root margin for intersection observer options.rootRef: React ref

Example use:

import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"

  useIntersectionObserver((visible) => {
    // then we are not at SSR
    ssr.current = false;
    setOffscreen(!visible);
    onVisibilitySet(visible);
  }, containerRef || ref, {
    once: true,
    rootMargin: '30%',
    rootRef,
  });


  useEffect(() => {
    if (eager) {
      return addTrackedLoader(
        () => {
          setOffscreen(false);
          onVisibilitySet(true);
        },
        containerRef || ref,
      );
    }

    return () => null;
  }, [eager]);