Function useCurrentSection

packages/dev/s2-docs/src/Nav.tsx:332–365

()

}

function useCurrentSection() {
  let {currentPage} = useRouter();
  let [selected, setSelected] = useState('');

  useEffect(() => {
    let elements = Array.from(document.querySelectorAll('article [data-anchor-link]'));
    let visible = new Set();
    let observer = new IntersectionObserver(
      entries => {
        for (let entry of entries) {
          if (entry.isIntersecting) {
            visible.add(entry.target);
          } else {
            visible.delete(entry.target);
          }

          let firstVisible = elements.find(e => visible.has(e));
          if (firstVisible) {
            setSelected('#' + firstVisible.id);
          }
        }
      },
      {rootMargin: '0px 0px -50% 0px'}
    );

    for (let element of elements) {
      observer.observe(element);
    }

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

  return selected;
}

export function OnPageNav({children}) {
  let selected = useCurrentSection();