# Fumadocs Core (the core library of Fumadocs): 目次
URL: /ja/docs/headless/components/toc
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/components/toc.ja.mdx

目次

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

## 使い方 [#usage]

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

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

### Anchor Provider [#anchor-provider]

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

### AnchorProviderProps

| Prop        | Type                   | Description                                          |
| ----------- | ---------------------- | ---------------------------------------------------- |
| `toc`       | `TOC.TOCItemType[]`    |                                                      |
| `single?`   | `boolean \| undefined` | Only accept one active item at most Default: `false` |
| `children?` | `React.ReactNode`      |                                                      |

### Scroll Provider [#scroll-provider]

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

### ScrollProviderProps

| Prop           | Type                                   | Description                                   |
| -------------- | -------------------------------------- | --------------------------------------------- |
| `containerRef` | `React.RefObject<HTMLElement \| null>` | Scroll into the view of container when active |
| `children?`    | `React.ReactNode`                      |                                               |

### 目次アイテム [#toc-item]

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

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

## 例 [#example]

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