TOC
Table of Contents
A Table of Contents with active anchor observer and auto scroll.
Usage
import * as Base from 'fumadocs-core/toc';
return (
<Base.AnchorProvider>
<Base.ScrollProvider>
<Base.TOCItem />
<Base.TOCItem />
</Base.ScrollProvider>
</Base.AnchorProvider>
);Anchor Provider
Watches for the active anchor using the Intersection Observer API.
Scroll Provider
Scrolls the scroll container to the active anchor.
TOC Item
An anchor item for jumping to the target anchor.
| Data Attribute | Values | Description |
|---|---|---|
data-active | true, false | Is the anchor active |
Example
import {
AnchorProvider,
ScrollProvider,
TOCItem,
type TOCItemType,
} from 'fumadocs-core/toc';
import { type ReactNode, useRef } from 'react';
export function Page({
items,
children,
}: {
items: TOCItemType[];
children: ReactNode;
}) {
const viewRef = useRef<HTMLDivElement>(null);
return (
<AnchorProvider toc={items}>
<div ref={viewRef} className="overflow-auto">
<ScrollProvider containerRef={viewRef}>
{items.map((item) => (
<TOCItem key={item.url} href={item.url}>
{item.title}
</TOCItem>
))}
</ScrollProvider>
</div>
{children}
</AnchorProvider>
);
}