Toc | fromsrc

Table of contents with scroll spy, progress indicator, and multiple variants.

Usage

tsx

import { Toc } from "fromsrc/client";

<div className="flex">
  <article>{children}</article>
  <Toc />
</div>;

Scroll spy

The toc automatically detects h2 and h3 headings within an <article> element. As you scroll, the current heading is highlighted.

When multi mode is enabled, all visible headings are highlighted as a range.

tsx

<Toc multi />

Variants

Default

Full toc with border-based highlighting showing which section is active.

tsx

<Toc variant="default" />

With multi-heading range:

tsx

<Toc variant="default" multi />

With zigzag lines connecting nested headings:

tsx

<Toc variant="default" zigzag />

Minimal

Simpler toc with scroll progress indicator on a vertical track.

tsx

<Toc variant="minimal" />

With zigzag progress:

tsx

<Toc variant="minimal" zigzag />

Inline

Collapsible toc that goes inside the content area.

tsx

<Toc variant="inline" />

With custom title:

tsx

<Toc variant="inline" title="contents" />

Always open:

tsx

<Toc variant="inline" collapsible={false} />

Open by default:

tsx

<Toc variant="inline" defaultOpen />

UseToc hook

Access toc state directly for custom implementations.

tsx

import { useToc } from "fromsrc/client";

function CustomToc() {
  const { headings, active, activeRange } = useToc(true);

  return (
    <nav>
      {headings.map((heading) => (
        <a
          key={heading.id}
          href={`#${heading.id}`}
          data-active={activeRange.includes(heading.id)}
        >
          {heading.text}
        </a>
      ))}
    </nav>
  );
}

Return value

field	type	description
headings	Heading[]	H2 and h3 elements with id, text, level
active	string	ID of the first active heading
activeRange	string[]	IDs of all visible headings (multi mode)

Heading type

tsx

interface Heading {
  id: string;
  text: string;
  level: number;
}

Props

prop	type	default	description
variant	"default" \| "minimal" \| "inline"	"default"	Toc style
zigzag	boolean	false	Show zigzag lines connecting headings
multi	boolean	false	Highlight multiple active headings
title	string	"on this page"	Header text (inline only)
collapsible	boolean	true	Can collapse (inline only)
defaultOpen	boolean	false	Start expanded (inline only)