Root Provider | Hanzo Docs

The context provider of all the components, including next-themes and <FrameworkProvider />. It should be located at the root layout.

Usage

Import it according to your React.js framework:

Next.js

React Router

Tanstack

Waku

import { RootProvider } from '@hanzo/docs/ui/provider/next';

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

import { RootProvider } from '@hanzo/docs/ui/provider/react-router';

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

import {
  HeadContent,
  Scripts,
} from '@tanstack/react-router';
import { RootProvider } from '@hanzo/docs/ui/provider/tanstack';

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html suppressHydrationWarning>
      <head>
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
        <RootProvider>{children}</RootProvider>
        <Scripts />
      </body>
    </html>
  );
}

import { RootProvider } from '@hanzo/docs/ui/provider/waku';

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

Search Dialog

Customize or disable the search dialog with search option.

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

Learn more from Search.

Theme Provider

Hanzo Docs supports light/dark modes with next-themes. Customise or disable it with theme option.

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

You can also install & reference next-themes in your code for managing themes.