@redocly/theme/src/core/hooks/use-active-section-id.ts

Shared UI components lib

import { useEffect, useState, useMemo } from 'react';
import throttle from 'lodash.throttle';

import type { Location } from 'react-router-dom';

import { useNavbarHeight } from '@redocly/theme/core/hooks';

export type UseActiveSectionIdReturnType = string;

export function useActiveSectionId(
  location: Location,
  hasOverviewPage = false,
  withNavbar = true,
): UseActiveSectionIdReturnType {
  const [itemId, setItemId] = useState<string>('');
  const navbarHeight = useNavbarHeight(location);
  const heightOffset = (withNavbar ? navbarHeight : 0) + 150; // use 150px to account next section visibility;

  const scrollListener = useMemo(
    () =>
      throttle(() => {
        const sections = document.querySelectorAll('[data-section-id]');
        if (sections.length < 2) {
          setItemId('');
          return;
        }
        for (let i = 0; i < sections.length; i++) {
          const section = sections[i];
          const rect = section.getBoundingClientRect();
          if (rect.y < heightOffset && rect.bottom > heightOffset) {
            setItemId(section.getAttribute('data-section-id') || '');
            return;
          }
        }
        if (hasOverviewPage) {
          setItemId('');
        }
      }, 150),
    [heightOffset, hasOverviewPage],
  );

  useEffect(() => {
    window.addEventListener('scroll', scrollListener, { capture: false });
    setTimeout(() => {
      scrollListener();
    }, 10);

    return () => {
      window.removeEventListener('scroll', scrollListener);
    };
  }, [location, heightOffset, scrollListener]);

  return itemId;
}