目次 | Fumadocs

アクティブなアンカーの監視と自動スクロールに対応した目次です。

使い方

import * as Base from 'fumadocs-core/toc';

return (
  <Base.AnchorProvider>
    <Base.ScrollProvider>
      <Base.TOCItem />
      <Base.TOCItem />
    </Base.ScrollProvider>
  </Base.AnchorProvider>
);

Anchor Provider

Intersection Observer API を使用して、アクティブなアンカーを監視します。

プロパティ

型

Scroll Provider

アクティブなアンカーの位置までスクロールコンテナをスクロールします。

プロパティ

型

目次アイテム

対象のアンカーへジャンプするためのアンカーアイテムです。

データ属性	値	説明
`data-active`	`true, false`	アンカーがアクティブかどうか

例

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>
  );
}

目次

使い方アンカーリンクをコピー

Anchor Providerアンカーリンクをコピー

Scroll Providerアンカーリンクをコピー

目次アイテムアンカーリンクをコピー

例アンカーリンクをコピー

このページの内容

使い方

Anchor Provider

Scroll Provider

目次アイテム

例