# @desource/context7-widget-react 中文文档 规范地址：https://npmcn.com/package/%40desource/context7-widget-react/ 版本：0\.2\.3 npm 元数据更新时间：2026-10-31T16:12:24.414Z 中文译文更新时间：2026-11-12T01:26:36.764Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40desource/context7-widget-react 原文对照：https://npmcn.com/package/%40desource/context7-widget-react/?lang=original 项目主页：https://github.com/DeSource-Labs/context7-widget/tree/main/packages/react#readme 源码仓库：https://github.com/DeSource-Labs/context7-widget ## 关键信息（来自 npm 元数据） - 包体积（解压后）：118 kB，14 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：react ^18\.3\.0 \|\| ^19\.0\.0，react-dom ^18\.3\.0 \|\| ^19\.0\.0 - 首次发布：2026-09-09T22:04:37.025Z - 最新版本发布：2026-10-31T16:12:24.099Z - 近 30 天下载量：17206（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：5（近 12 个月 5 个） ## 中文简介 可自定义的上下文7 文档聊天部件的本地反应组件和钩子 . ## 安装 ```sh npm install @desource/context7-widget-react ``` 也可以使用：`pnpm add @desource/context7-widget-react`、`yarn add @desource/context7-widget-react`、`bun add @desource/context7-widget-react` ## README # @ desource/context7-widget- react [![React](https://img.shields.io/npm/v/@desource/context7-widget-react?color=blue&logo=react)](https://www.npmjs.com/package/@desource/context7-widget-react) [![Coverage](https://codecov.io/gh/DeSource-Labs/context7-widget/branch/main/graph/badge.svg)](https://codecov.io/gh/DeSource-Labs/context7-widget) [![SonarCloud](https://sonarcloud.io/api/project_badges/measure?project=DeSource-Labs_context7-widget&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=DeSource-Labs_context7-widget) [![Ask Context7](https://img.shields.io/badge/Ask%20Context7-059669.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI0IDBINEMxLjc5MDg2IDAgMCAxLjc5MDg2IDAgNFYyNEMwIDI2LjIwOTEgMS43OTA4NiAyOCA0IDI4SDI0QzI2LjIwOTEgMjggMjggMjYuMjA5MSAyOCAyNFY0QzI4IDEuNzkwODYgMjYuMjA5MSAwIDI0IDBaIiBmaWxsPSIjRjdGMkU4IiBmaWxsLW9wYWNpdHk9IjAuNjUiLz4KPHBhdGggZD0iTTEwLjYgMTUuMjk5MkMxMC42IDE3LjQ5OTIgOS43MDAwNSAxOS4zOTkyIDguMjAwMDUgMjEuMDk5MkgxMS42VjIyLjc5OTJINi4zMDAwNVYyMS4xOTkyQzguMDAwMDUgMTkuMzk5MiA4LjYwMDA1IDE3Ljg5OTIgOC42MDAwNSAxNS4yOTkySDEwLjZaTTE3LjQgMTUuMjk5MkMxNy40IDE3LjQ5OTIgMTguMyAxOS4zOTkyIDE5LjggMjEuMDk5MkgxNi40VjIyLjc5OTJIMjEuN1YyMS4xOTkyQzIwIDE5LjM5OTIgMTkuNCAxNy44OTkyIDE5LjQgMTUuMjk5MkgxNy40Wk0xMC42IDEyLjY5OTJDMTAuNiAxMC40OTkyIDkuNzAwMDUgOC41OTkyMiA4LjIwMDA1IDYuODk5MjJIMTEuNlY1LjE5OTIySDYuMzAwMDVWNi43OTkyMkM4LjAwMDA1IDguNTk5MjIgOC42MDAwNSAxMC4wOTkyIDguNjAwMDUgMTIuNjk5MkgxMC42Wk0xNy40IDEyLjY5OTJDMTcuNCAxMC40OTkyIDE4LjMgOC41OTkyMiAxOS44IDYuODk5MjJIMTYuNFY1LjE5OTIySDIxLjdWNi43OTkyMkMyMCA4LjU5OTIyIDE5LjQgMTAuMDk5MiAxOS40IDEyLjY5OTJIMTcuNFoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=)](https://context7.com/desource-labs/context7-widget) [![Ask DeepWiki](https://img.shields.io/badge/Ask%20DeepWiki-1c398e.svg?logo=data:image/svg%2bxml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0iI2NiY2JjYiIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0xOC42IDIwLjFxMS0uNiAyLjItLjZoLjNhNCA0IDAgMCAxIDIgLjdoLjJ2LjFsMSAxaC4xdi4yaC4xbC4xLjF2LjFxLjcgMSAuNyAyLjN0LS42IDIuMnYuMWwtLjIuMkE0IDQgMCAwIDEgMjMgMjhoLS4ydi4xbC0xLjQuNGgtLjVxLTEuMyAwLTIuMy0uNWwtNC4xLTIuNC04LjMgNC44djkuNWw4LjMgNC44IDguMi00LjhWMzVxMC0xLjIuNi0yLjJ2LS4xbC4yLS4yYTQgNCAwIDAgMSAxLjctMS41bDEuMy0uNGguNnExLjMgMCAyLjMuNmw0LjIgMi4zIDguMi00Ljd2LTkuNmwtOC4yLTQuNy00LjIgMi4zcS0xIC42LTIuMi42aC0uM2E0IDQgMCAwIDEtMi0uNmwtLjItLjEtMS0xaC0uMXYtLjJoLS4xbC0uMS0uMnYtLjFxLS43LTEtLjctMi4yVjguMmwtOC4yLTQuNy04LjMgNC43djkuNWw4LjIgNC44eiIvPjwvc3ZnPg==)](https://deepwiki.com/DeSource-Labs/context7-widget) [![License](https://img.shields.io/badge/license-MIT-blue)](https://github.com/DeSource-Labs/context7-widget/blob/main/LICENSE) 在您的 React app 中让上下文 7 的 docs 查看家 。 匹配您的设计 预设和 CSS, 从您的帮助按钮打开,并通过 React 控制它 道具、裁判或钩子. ## 为什么要使用这个部件 ? 上下文7提供了其文件部件并免费托管了 AI 答案 。 这个项目 在服务周围添加一个自定义的界面 . 官方部件的基本样式选项可以让聊天离开位置 在一个精心设计的网站。 该套件增加了对这些细节的控制: 自定义字体和间隔,灵活放置,可复制代码,多行输入, 并停止和重试动作. 如果你使用正式部件, [替换其脚本 URL](https://github.com/DeSource-Labs/context7-widget#existing-context7-widget-user) 或采用以下本地反应部分。 保留您现有的上下文7 库 和域设置。 为了实现新的融合,请在访客所在的地方提供医生帮助 选择您的库或工作设置 . 反应拥有渲染和生命周期. 共享核心套件处理对话 状态,运输,马克下和默认. ## 开始前 使用您在背景7上声称的图书馆 。 在其 **管理 – 聊天** 设置, 启用部件, 将您的站点域添加到允许的域并保存 . 替换 `/owner/repo` 以该图书馆的编号为例。 图书馆 仅索引无法在您的网站上聊天 . 见 [背景7 的部件设置](https://context7.com/docs/howto/chat-widget)。 。 。 . ## 安装 ```bash npm install @desource/context7-widget-react ``` 一次导入样式表 : ```ts import '@desource/context7-widget-react/styles.css'; ``` ## 构成部分 ```tsx import { useRef } from 'react'; import { Context7Widget, type Context7WidgetHandle } from '@desource/context7-widget-react/component'; import '@desource/context7-widget-react/styles.css'; export function DocsAssistant() { const widget = useRef(null); return ( console.log(detail.question)} /> ); } ``` `customTrigger` 支持四种模式: 为内置浮动省略 发射器,通过 `true` 对于反应管理按钮,通过元素 ID 或 CSS 外部触发选择器,或通过 `Element`反应参考。 函数在 页:1 `trigger` proc可以在所管理的按钮内渲染自定义的内容. ## 受控开放状态 奥米 `open` 内部状态 `defaultOpen`启用 `open` 财务报告和审定财务报表 `onOpenChange` 当应用程序状态拥有对话框时 : ```tsx const [docsOpen, setDocsOpen] = useState(false); ; ``` `onOpen` 财务报告和审定财务报表 `onClose` 实际排放的生命周期通知 过渡; `onOpenChange` 是受控状态请求. ## 钩子 `useContext7Widget` 控制已注册的最新反应部件 `widgetId`,或者它可以拥有一个程序上挂载的 React root: ```tsx import { useContext7Widget } from '@desource/context7-widget-react/hook'; import '@desource/context7-widget-react/styles.css'; export function DocsHelp() { const docs = useContext7Widget({ autoMount: true, library: '/owner/repo', position: 'center', preset: 'terminal', widgetId: 'docs' }); return ( ); } ``` 所有者挂起后自动挂起 。 打电话 `send`, (中文(简体) ), `open`,以及 来自事件处理器或部件准备好后的其他控件. 钩子回来了 `widget`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`,以及 `messages`附加时 `mount`, (中文(简体) ), `unmount`, (中文(简体) ), `open`, (中文(简体) ), `close`, (中文(简体) ), `toggle`, (中文(简体) ), `send`, (中文(简体) ), `cancel`, (中文(简体) ), `retry`, (中文(简体) ), `reset`,以及 `getMessages`。 。 。 . `mount(overrides)` 创建或更新自有的 React 部件. 每一个钩子选择都是反应性的, 包括反应儿童,触发内容, 根道具和回调; 明确 `mount(overrides)` 价值观贯穿全局 这些更新。 除非 `removeOnUnmount` 实值 `false`。 。 。 . 登记册是包级的,不是基于React或DOM祖先. `widgetId` 默认为 `default`; 当否时 `default` 注册已存在, 查找掉入 返回用于单部件应用程序的第一个可用的注册部件. 复制 IDs 形成一个堆: 最新注册获胜, 并卸载 恢复先前的注册. ## 实例 当应用程序状态拥有可见度时使用受控部件 : ```tsx import { useState } from 'react'; import { Context7Widget } from '@desource/context7-widget-react/component'; import '@desource/context7-widget-react/styles.css'; export function DocsHelp() { const [open, setOpen] = useState(false); return ( ); } ``` 使用 `useContext7Widget({ autoMount: true })` 用于路径动作,命令 调色板,或不需要设置 当前树中的组件。 可在 [演示画廊](https://context7.desourcelabs.com/examples)。 。 。 . ## 道具、事件和本地化 本构成部分接受共同选项: `library`, (中文(简体) ), `theme`, (中文(简体) ), `preset`, (中文(简体) ), `position`, (中文(简体) ), `color`, (中文(简体) ), `customTrigger`, (中文(简体) ), `backdrop`, (中文(简体) ), `closeOnOutsideClick`, (中文(简体) ), `defaultOpen`, (中文(简体) ), `initialMessage`, (中文(简体) ), `labels`, (中文(简体) ), `launcherLabel`, (中文(简体) ), `launcherVariant`, (中文(简体) ), `linkBaseUrl`, (中文(简体) ), `panelHeight`, (中文(简体) ), `panelWidth`, (中文(简体) ), `placeholder`, (中文(简体) ), `title`,以及 `widgetId`。 。 。 . 使用 `labels` 覆盖任何用户界面或辅助字符串,包括 归属和图书馆倒置. `Context7WidgetLabels` 导出为已键入 辞典. 相对的 Markdown 链接解析到上下文 7 库 默认页面; 设置 `linkBaseUrl` 以使用您的文档来源. 生命周期和流回调 `onReady`, (中文(简体) ), `onOpen`, (中文(简体) ), `onClose`, (中文(简体) ), `onCancel`, (中文(简体) ), `onQuestion`, (中文(简体) ), `onFirstToken`, (中文(简体) ), `onAnswer`, (中文(简体) ), `onAnswerComplete`, (中文(简体) ), `onToolCall`, (中文(简体) ), `onToolResult`,以及 `onError`。每个调用对象都收到输入的详细对象. 组件参考器曝光 `open`, (中文(简体) ), `close`, (中文(简体) ), `toggle`, (中文(简体) ), `send`, (中文(简体) ), `cancel`, (中文(简体) ), `retry`, (中文(简体) ), `reset`, (中文(简体) ), `isOpen`, (中文(简体) ), `isBusy`, (中文(简体) ), `getMessages`,以及 `subscribe`当请求是 中,多行编曲变为只读,其发送动作变为 启用停止动作 。 输入发送; Shift+ 输入新行. 在对话接近时 下,保留读者向上滚动后的位置,并恢复 当他们回到底部或重设对话时. 通过下列程序注册的国家听众 `subscribe` 彼此隔离. 如果投出, 则在不损坏请求或跳过的情况下报告出错 其余的听众. ## 数据流动与隐私 浏览器会发布已配置的库 ID 和当前对话信件 直接转到 `https://context7.com/api/v2/widget/chat`源代码实验室没有 代理聊天内容 。 该套件没有添加分析、饼干或持久性 浏览器存储; 对话状态一直保存在挂载部件中直至 `reset()` 或卸载。 回调有效载荷向主机显示问答 应用,因此,任何记录、分析或持久性都增加了 集成器数据流. 不发送机密或敏感个人资料,以及 审查背景7的后端处理和保留政策. ## 自定义 该组件将本地光DOM置于 `.context7-widget`应用共享 CSS 该根的变量和使用 `[part~='send-button']`\- 样式选择器 稳定组件。 控制触发符的使用 `--c7-trigger-background`, (中文(简体) ), `--c7-trigger-border`, (中文(简体) ), `--c7-trigger-color`, (中文(简体) ), `--c7-trigger-focus`, (中文(简体) ), `--c7-trigger-radius`,以及 `--c7-trigger-shadow`。 。 。 . ```css .context7-widget.docs-assistant { --c7-accent: #7cffb2; --c7-panel-background: #101513; --c7-panel-color: #f7f2e8; --c7-panel-radius: 8px; } .context7-widget.docs-assistant [part~='send-button'] { min-width: 5rem; } ``` 过 `rootProps={{ className: 'docs-assistant' }}` 以范围覆盖这些覆盖。 见 [实时定制指南](https://context7.desourcelabs.com/customization) 每一个公共标志和部分. ### 包装 一揽子措施是仅限无害环境管理和安保部门安全进口: | 条目 | 目录 | | --- | --- | | `@desource/context7-widget-react/component` | `Context7Widget` 和组件类型;不导入 React DOM | | `@desource/context7-widget-react/hook` | `useContext7Widget`; 要求自有根重现 DOM | | `@desource/context7-widget-react` | 导出两个表面的相容性条目 | | `@desource/context7-widget-react/styles.css` | 已切换的部件和被管理的触发样式 | 偏爱 `/component` 当你只使 `Context7Widget`。 。 。 . `react-dom` 是一个 用于此孤立条目的可选对等端, 需要 `/hook` 和由 软件包根,它也导出钩子。 反应 反应 DOM 和核心包 保持外部状态,以便应用程序可以复制它们。 制作或 程序安装仍然需要浏览器文档。 每个 Java 脚本 条目和共享块保留反应 `"use client"` 反应的边界 服务器组件和Next.js App路由器消费者. ## 相关软件包 - [`@desource/context7-widget`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/core) 提供浏览器自定义元素,滴入脚本,TypeScript帮助器,以及共享的无头引擎. - [`@desource/context7-widget-vue`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/vue) 提供本地 Vue 3 组件,可堆肥,插件默认,以及自定义触发槽. - [`@desource/context7-widget-nuxt`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/nuxt) 为 Nuxt 3 和 4 添加自动导入,自动样式和全应用程序默认值. - [`@desource/context7-widget-svelte`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/svelte) 提供原生的Svelte 5组件,可绑定的开口状态,触发片段,以及反应控制器. - [`@desource/context7-widget-angular`](https://github.com/DeSource-Labs/context7-widget/tree/main/packages/angular) 提供独立的Angular组件,信号,应用程序默认,以及可注射控制. ## 常见问题 ### @desource/context7-widget-react 是什么？ 可自定义的上下文7 文档聊天部件的本地反应组件和钩子 \. ### 如何安装 @desource/context7-widget-react？ 在项目目录运行 npm install @desource/context7-widget-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.3\.0 \|\| ^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @desource/context7-widget-react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @desource/context7-widget-react 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @desource/context7-widget-react 可以商用吗？ @desource/context7-widget-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @desource/context7-widget-react 的下载量有多少？ 根据 npm 官方下载统计，@desource/context7-widget-react 在 2026/10/12 – 2026/11/10 这 30 天内被下载 17,206 次，日均约 574 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @desource/context7-widget-react 还在维护吗？ 最新版本 0\.2\.3 发布于 2026/11/01（11 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/09/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。