Root Provider

next-themes や <FrameworkProvider /> を含む、すべてのコンポーネントに対するコンテキストプロバイダーです。ルートレイアウトに配置してください。

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

お使いの React.js フレームワークに応じて、次のようにインポートしてください。

import { RootProvider } from 'fumadocs-ui/provider/next';

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

検索ダイアログアンカーリンクをコピー

search オプションで、検索ダイアログをカスタマイズしたり無効化したりできます。

<RootProvider
  search={{
    enabled: false,
  }}
>
  {children}
</RootProvider>

詳しくは検索をご覧ください。

テーマプロバイダーアンカーリンクをコピー

Fumadocs は next-themes を使用してライト/ダークモードに対応しています。 theme オプションでカスタマイズしたり、無効化したりできます。

<RootProvider
  theme={{
    enabled: false,
  }}
>
  {children}
</RootProvider>

テーマの管理には、next-themes をインストールしてコード内で直接参照することもできます。

ホットキーアンカーリンクをコピー

D を押すと、ライトモードとダークモードが切り替わります。 ただし、編集可能な要素 (<input /> など) に入力している間や、検索ダイアログなどのダイアログが開いている間は反応しません。

別のキーを使う場合は theme.hotKey に指定し、無効にする場合は false を渡してください。

<RootProvider
  theme={{
    hotKey: false,
  }}
>
  {children}
</RootProvider>

一致するキーの組み合わせを完全に制御したい場合は、関数を渡すこともできます。

<RootProvider
  theme={{
    hotKey: (e) => e.shiftKey && e.key === 'D',
  }}
>
  {children}
</RootProvider>