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 | Default |
|---|---|---|
toc | TableOfContents | - |
single? | boolean | true |
children? | ReactNode | - |
Scroll Provider
Scrolls the scroll container to the active anchor.
| Prop | Type | Default |
|---|---|---|
containerRef | RefObject<HTMLElement | null> | - |
children? | ReactNode | - |
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