Hanzo
Ui

Search UI

The UI for document search

Overview

You can customise Search UI from <RootProvider />.

import { RootProvider } from '@hanzo/docs-ui/provider/<framework>';
import type { ReactNode } from 'react';
import { SearchDialog } from '@/components/my-search-dialog';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html>
      <body>
        <RootProvider
          search={{
            enabled: false, // disable search entirely
            SearchDialog, // replace search dialog
          }}
        >
          {children}
        </RootProvider>
      </body>
    </html>
  );
}

Hot Keys

Customise the hot keys to trigger search dialog, by default it's ⌘ K or Ctrl K.

import { RootProvider } from '@hanzo/docs-ui/provider/<framework>';

<RootProvider
  search={{
    hotKey: [
      {
        display: 'K',
        key: 'k', // key code, or a function determining whether the key is pressed
      },
    ],
  }}
>
  {children}
</RootProvider>;

References

A full list of options.

Prop

Type

Custom UI

Fumadocs UI also exposes a lower level <SearchDialog /> component for advanced use, you can create your own search dialog to replace the default one.

'use client';
import React from 'react';
import { useDocsSearch } from '@hanzo/docs-core/search/client';
import {
  SearchDialog,
  SearchDialogClose,
  SearchDialogContent,
  SearchDialogHeader,
  SearchDialogFooter,
  SearchDialogIcon,
  SearchDialogInput,
  SearchDialogList,
  SearchDialogOverlay,
  type SharedProps,
} from '@hanzo/docs-ui/components/dialog/search';
import { useI18n } from '@hanzo/docs-ui/contexts/i18n';

export default function DefaultSearchDialog(props: SharedProps) {
  const { locale } = useI18n(); // (optional) for i18n
  const { search, setSearch, query } = useDocsSearch({
    type: 'fetch',
    locale,
  });

  return (
    <SearchDialog search={search} onSearchChange={setSearch} isLoading={query.isLoading} {...props}>
      <SearchDialogOverlay />
      <SearchDialogContent>
        <SearchDialogHeader>
          <SearchDialogIcon />
          <SearchDialogInput />
          <SearchDialogClose />
        </SearchDialogHeader>
        <SearchDialogList items={query.data !== 'empty' ? query.data : null} />
      </SearchDialogContent>
      <SearchDialogFooter>{/* footer items */}</SearchDialogFooter>
    </SearchDialog>
  );
}

Content Renderer

The content in search result supports Markdown, match highlights are expressed using <mark />.

You can customise the Markdown renderer.

<SearchDialogList
  items={query.data !== 'empty' ? query.data : null}
  Item={(props) => (
    <SearchDialogListItem
      {...props}
      renderMarkdown={(text) => {
        // ...
      }}
    />
  )}
/>

How is this guide?

Last updated on

On this page

Overview
Hot Keys
References
Custom UI
Content Renderer