# Fumadocs (Framework Mode, React Router): FlexSearch
URL: /ja/docs/react-router/search/flexsearch
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/search/flexsearch.ja.mdx
高速で軽量な検索エンジンです。
## 概要 [#overview]
セットアップ手順については、[FlexSearch の統合](/docs/headless/search/flexsearch)を参照してください。
サーバー上で動作する API エンドポイント経由で検索するか、静的サイトの場合は静的にキャッシュされた JSON ファイルを使って検索します。
## セットアップ [#setup]
検索ダイアログを作成します。
```tsx title="components/search.tsx"
'use client';
import { useFetchSearch } from 'fumadocs-core/search/client';
import {
SearchDialog,
SearchDialogClose,
SearchDialogContent,
SearchDialogHeader,
SearchDialogIcon,
SearchDialogInput,
SearchDialogList,
SearchDialogOverlay,
type SharedProps,
} from 'fumadocs-ui/components/dialog/search';
import { useI18n } from 'fumadocs-ui/contexts/i18n';
export default function DefaultSearchDialog(props: SharedProps) {
const { locale } = useI18n(); // (optional) for i18n
const search = useFetchSearch({
locale,
});
return (
);
}
```
静的サイトの場合は、検索サーバーで[静的モード](/docs/headless/search/flexsearch#static-export)を設定したうえで、検索クライアントを次のように変更してください。
```tsx title="components/search.tsx"
'use client';
import {
SearchDialog,
SearchDialogClose,
SearchDialogContent,
SearchDialogHeader,
SearchDialogIcon,
SearchDialogInput,
SearchDialogList,
SearchDialogOverlay,
type SharedProps,
} from 'fumadocs-ui/components/dialog/search';
import { useFlexsearchStatic } from 'fumadocs-core/search/client/flexsearch-static';
import { useI18n } from 'fumadocs-ui/contexts/i18n';
export default function DefaultSearchDialog(props: SharedProps) {
const { locale } = useI18n(); // (optional) for i18n
const search = useFlexsearchStatic({ locale });
return (
);
}
```
### 検索ダイアログを置き換える [#replace-search-dialog]
ルートレイアウトで、独自の検索ダイアログを [``](/docs/ui/layouts/root-provider) に渡します。
```tsx title="app/root.tsx"
import { Links, Meta, Scripts, ScrollRestoration } from 'react-router';
import { RootProvider } from 'fumadocs-ui/provider/react-router';
// [!code ++]
import SearchDialog from '@/components/search';
export function Layout({ children }: { children: React.ReactNode }) {
return (
{/* [!code highlight] */}
{children}
);
}
```
### タグフィルター [#tag-filter]
必要に応じて、検索結果をタグで絞り込むための UI を追加できます。検索サーバー側で[タグフィルター](/docs/headless/search/flexsearch#tag-filter)を設定したうえで、以下を追加してください。
```tsx
'use client';
import {
SearchDialog,
SearchDialogContent,
SearchDialogFooter,
SearchDialogOverlay,
type SharedProps,
TagsList,
TagsListItem,
} from 'fumadocs-ui/components/dialog/search';
import { useState } from 'react';
import { useFlexsearchStatic } from 'fumadocs-core/search/client/flexsearch-static';
export default function CustomSearchDialog(props: SharedProps) {
// [!code ++]
const [tag, setTag] = useState();
const search = useFlexsearchStatic({
tag, // [!code ++]
});
return (
...
{/* [!code ++:3] */}
My Value
);
}
```