useScrollSpy

import { useScrollSpy } from '@raddix/use-scroll-spy';

export default function TableOfContent() {
  const headings = [
    {id: 'overview', text: 'Overview'},
    {id: 'components', text: 'Creating and nesting components'},
    {id: 'styles', text: 'Adding styles'},
  ]
  const headingIds = headings.map(({id}) => id)

  const activeId = useScrollSpy(headingIds, {
      rootMargin: "0% 0% -80% 0%",
  });

  return (
    <ul>
      {headings.map((heading, i) => (
          <li
            key={i}
            style={
              activeId === heading.id ? { color: 'blue' } : { color: '#000' }
              }
          >
            <a href={`#${heading.id}`}>{heading.text}</a>
          </li>
        ))}
    </ul>
  );
};