mcpField
D
devtools-react

devtools-react

github.com/vercel-labs开发18.8k142 次安装5 天前更新
代码仓库

关于 devtools-react

为现有 json-render Provider 添加开发工具面板的 React 适配器。它提供面板控制和命令式 Hook，并在生产构建中不渲染内容。

主要功能

  1. 01在 React 中挂载开发工具面板
  2. 02观察渲染器状态、操作和流
  3. 03通过 Hook 打开或切换面板
  4. 04记录流事件
  5. 05生产环境中隐藏面板

适用场景

  1. 01开发时检查渲染器状态
  2. 02从 React 组件打开或关闭面板
  3. 03记录流事件以便调试

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/json-render --skill devtools-react

安装后在 Claude Code 中输入/devtools-react确认已加载。

详细介绍

@json-render/devtools-react

json-render 开发者工具面板的 React 适配器。共享面板功能、属性、停靠行为和服务端流捕获，请参阅 skills/devtools/SKILL.md。

安装

npm install @json-render/devtools @json-render/devtools-react

挂载面板

将 JsonRenderDevtools 挂载在现有的 React json-render 提供程序内，使其能够观察渲染器的状态、操作和流：

import { JsonRenderDevtools } from "@json-render/devtools-react";

<JSONUIProvider registry={registry} handlers={handlers}>
  <Renderer spec={spec} registry={registry} />
  <JsonRenderDevtools spec={spec} catalog={catalog} messages={messages} />
</JSONUIProvider>;

在生产构建中，该组件不会渲染任何内容。面板提供共享的开发者工具控件，包括 Ctrl/Cmd + Shift + J 快捷键。

命令式控件

在任何已挂载的 React 后代组件中使用 useJsonRenderDevtools：

import { useJsonRenderDevtools } from "@json-render/devtools-react";

const devtools = useJsonRenderDevtools();
devtools?.open();
devtools?.toggle();
devtools?.recordEvent({ kind: "stream-text", at: Date.now(), text: "hi" });

在生产环境中或组件挂载前，该钩子会返回 null。请在 @json-render/devtools 中保留服务端流检测功能。

评论

支持 Markdown