Implementing a `useIntersectionObserver` Hook

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

function useIntersectionObserver(options) {
  const [entry, setEntry] = useState(null);
  const [node, setNode] = useState(null); // The DOM element to observe

  const observer = useRef(null);

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

    observer.current = new IntersectionObserver(([ent]) => setEntry(ent), options);

    if (node) {
      observer.current.observe(node);
    }

    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, [node, options]); // Re-run if observed node or options change

  return [setNode, entry];
}

// Example Usage:
// function MyComponent() {
//   const [setRef, entry] = useIntersectionObserver({ threshold: 0.1 });
//   const isVisible = entry?.isIntersecting;

//   return (
//     <div style={{ height: '100vh', background: 'lightblue' }}>Scroll down</div>
//     <div
//       ref={setRef}
//       style={{
//         height: '100vh',
//         background: isVisible ? 'lightgreen' : 'lightcoral',
//         display: 'flex',
//         alignItems: 'center',
//         justifyContent: 'center',
//         fontSize: '2em'
//       }}
//     >
//       {isVisible ? 'I am visible!' : 'Scroll to see me'}
//     </div>
//   );
// }