useObserver.js

// React hook useObserver
// It also works in next.js

import { useEffect, useRef } from 'react';

const useObserver = (ref, callback, options, shouldWork = null) => {
  const observer = useRef();

  useEffect(() => {
    if (observer.current) {
      observer.current.disconnect();
    }

    const observerOptions = {
      root: document,
      rootMargin: '0px',
      threshold: 0,
      ...options,
    };

    const cb = (entries) => {
      if (!entries[0].isIntersecting || shouldWork === false) return;

      callback();
    };

    observer.current = new IntersectionObserver(cb, observerOptions);
    observer.current.observe(ref.current);
  }, [callback, ref, options, shouldWork]);
};

export default useObserver;