TOC
Table of Content
A Table of Contents with active anchor observer and auto scroll.
Usage
import * as Base from 'fumadocs-core/toc';
return (
<Base.TOCProvider>
<Base.TOCItem />
</Base.TOCProvider>
);
TOC Provider
Contains all anchor items. By default, it automatically scrolls to the active anchor.
Prop | Type | Default |
---|---|---|
toc | TableOfContents | - |
TOC Item
The anchor element.
Prop | Type | Default |
---|---|---|
item | TOCItemType | - |
Data Attribute | Values | Description |
---|---|---|
data-active | true, false | Is active anchor |
Use Active Anchor
A hook for getting the active anchor. It accepts the item url and return a boolean value, must be called under the TOC Provider.
Useful for implementing advanced styling.
import { useActiveAnchor } from 'fumadocs-core/toc';
const isActive = useActiveAnchor(item.url);
Last updated on 1/27/2024