独立搜索组件

@fern-api/search-widget 包提供了一个独立的 React 组件，可以将 Ask Fern 的 AI 驱动搜索功能带到您的 Fern Docs 网站之外的任何 React 应用程序中。在您的仪表板、营销网站或内部工具中嵌入搜索模态框，让用户无需离开其工作流程即可找到相关文档。

嵌入在仪表板中的搜索组件。试用在线演示或浏览演示源码。

前提条件

React 19 — 所有其他依赖项都已打包。
启用了 Ask Fern 的实时云托管 Fern Docs 站点 — 该组件在运行时连接到您已发布的文档站点。不支持自托管和本地预览环境。
公开文档 — 该组件仅支持公开文档。如果您的站点使用身份验证，该组件将仅返回未经身份验证的结果。

快速开始

安装包

$ npm install @fern-api/search-widget react@19 react-dom@19

添加搜索模态框

导入 SearchModal 和打包的样式，然后使用您的文档域名渲染组件。该组件会渲染一个按钮，点击时打开搜索模态框。

1 import { SearchModal } from '@fern-api/search-widget';
2 import '@fern-api/search-widget/styles';
3 
4 function App() {
5   return (
6     <SearchModal domain="https://docs.example.com" lang="en">
7       搜索文档
8     </SearchModal>
9   );
10 }

自定义触发按钮

SearchModal 组件会渲染一个打开搜索模态框的按钮。使用 className、style 或定位默认的 fern-search-button 类来设置样式。所有标准的 HTML 按钮属性都会被转发。

1 <SearchModal
2   domain="https://docs.example.com"
3   lang="en"
4   className="my-search-button"
5 >
6   搜索文档
7 </SearchModal>

属性

还支持所有标准的 HTML 按钮属性，并转发到触发按钮。

domain

stringRequired

您已发布的 Fern Docs 站点的 URL（例如，https://docs.example.com）。如果您的文档不在根目录，请包含完整路径（例如，https://buildwithfern.com/learn）。

lang

stringDefaults to en

搜索界面的语言代码。

icon

React.ReactNode

在按钮中显示的图标元素。

className

string

触发按钮的 CSS 类名。

style

React.CSSProperties

触发按钮的内联样式。

children

React.ReactNode

按钮内容（文本、图标等）。

disabled

boolean

禁用按钮。

onClick

function

在模态框打开之前运行的额外点击处理程序。

嵌入在仪表板中的搜索组件。试用在线演示或浏览演示源码。

前提条件

React 19 — 所有其他依赖项都已打包。
启用了 Ask Fern 的实时云托管 Fern Docs 站点 — 该组件在运行时连接到您已发布的文档站点。不支持自托管和本地预览环境。
公开文档 — 该组件仅支持公开文档。如果您的站点使用身份验证，该组件将仅返回未经身份验证的结果。

快速开始

安装包

$ npm install @fern-api/search-widget react@19 react-dom@19

添加搜索模态框

导入 SearchModal 和打包的样式，然后使用您的文档域名渲染组件。该组件会渲染一个按钮，点击时打开搜索模态框。

1 import { SearchModal } from '@fern-api/search-widget';
2 import '@fern-api/search-widget/styles';
3 
4 function App() {
5   return (
6     <SearchModal domain="https://docs.example.com" lang="en">
7       搜索文档
8     </SearchModal>
9   );
10 }

自定义触发按钮

1 <SearchModal
2   domain="https://docs.example.com"
3   lang="en"
4   className="my-search-button"
5 >
6   搜索文档
7 </SearchModal>

属性

还支持所有标准的 HTML 按钮属性，并转发到触发按钮。

domain

stringRequired

您已发布的 Fern Docs 站点的 URL（例如，https://docs.example.com）。如果您的文档不在根目录，请包含完整路径（例如，https://buildwithfern.com/learn）。

lang

stringDefaults to en

搜索界面的语言代码。

icon

React.ReactNode

在按钮中显示的图标元素。

className

string

触发按钮的 CSS 类名。

style

React.CSSProperties

触发按钮的内联样式。

children

React.ReactNode

按钮内容（文本、图标等）。

disabled

boolean

禁用按钮。

onClick

function

在模态框打开之前运行的额外点击处理程序。

1	import { SearchModal } from '@fern-api/search-widget';
2	import '@fern-api/search-widget/styles';
3
4	function App() {
5	return (
6	<SearchModal domain="https://docs.example.com" lang="en">
7	搜索文档
8	</SearchModal>
9	);
10	}

1	<SearchModal
2	domain="https://docs.example.com"
3	lang="en"
4	className="my-search-button"
5	>
6	搜索文档
7	</SearchModal>