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.
Prop
Type
Scroll Provider
Scrolls the scroll container to the active anchor.
Prop
Type
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 } from 'fumadocs-core/toc';
import { type ReactNode, useRef } from 'react';
import type { TOCItemType } from 'fumadocs-core/server';
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>
);
}How is this guide?
Last updated on