import { useRef, useState, useEffect } from "react"; export function useHeadsObserver() { const observer = useRef<any>(); const [activeId, setActiveId] = useState<any>(""); useEffect(() => { const handleObsever = (entries) => { entries.forEach((entry) => { if (entry?.isIntersecting) { setActiveId(entry.target.id); } }); }; observer.current = new IntersectionObserver(handleObsever, { rootMargin: "28% 0% -87% 0%", }); const elements = document.querySelectorAll("h1, h2, h3, h4"); elements.forEach((elem) => observer.current.observe(elem)); return () => observer.current?.disconnect(); }, []); return { activeId }; }