# @berenjena/react-dev-panel 中文文档

规范地址：https://npmcn.com/package/%40berenjena/react-dev-panel/

版本：2\.5\.1
npm 元数据更新时间：2026-06-22T11:43:45.461Z
中文译文更新时间：2026-11-07T22:53:42.533Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40berenjena/react-dev-panel
原文对照：https://npmcn.com/package/%40berenjena/react-dev-panel/?lang=original
项目主页：https://github.com/Berenjenas/react-dev-panel
源码仓库：https://github.com/Berenjenas/react-dev-panel

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：198 kB，163 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2025-07-21T12:42:39.424Z
- 最新版本发布：2026-06-22T11:43:45.128Z
- 近 30 天下载量：6555（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 5 个）

## 中文简介

反应开发小组,拥有各种工具和公用事业.

## 安装

```sh
npm install @berenjena/react-dev-panel
```

也可以使用：`pnpm add @berenjena/react-dev-panel`、`yarn add @berenjena/react-dev-panel`、`bun add @berenjena/react-dev-panel`

## README

# 反应 Dev 面板

![NPM Version](https://badgen.net/npm/v/@berenjena/react-dev-panel) ![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/%40berenjena%2Freact-dev-panel?label=Bundle%20size%20\(gzip\)) [![License: MIT](https://badgen.net/npm/license/@berenjena/react-dev-panel)](https://opensource.org/licenses/MIT) [![Weekly Downloads](https://badgen.net/npm/dw/@berenjena/react-dev-panel)](https://www.npmjs.com/package/@berenjena/react-dev-panel)

一个轻量级,型式安全的React开发面板,允许您在开发过程中实时控制组件状态和道具.

## 特征

-   **一个虎克**单人 `useDevPanel` 钩子 - 没有提供者, 没有设置
-   **13 控制类型**: 文本、 数字、 布尔、 选择、 颜色、 范围、 日期、 按钮、 本地套接字等
-   **自动持续**: 控制值的可选本地Storage同步
-   **类型安全**: IntelliSense 的完整类型脚本支持
-   **可主题**: 21个内置主题+CSS自定义属性
-   **轻巧**: ~16 KB gziped, 零运行时间依赖性

## 安装

```bash
npm install -D @berenjena/react-dev-panel
```

## 快速启动

```tsx
import { useState } from "react";
import { useDevPanel } from "@berenjena/react-dev-panel";

function App() {
    const [name, setName] = useState("John");
    const [age, setAge] = useState(25);
    const [theme, setTheme] = useState("dark");

    useDevPanel("Settings", {
        name: { type: "text", value: name, onChange: setName },
        age: { type: "number", value: age, min: 0, max: 100, onChange: setAge },
        theme: { type: "select", value: theme, options: ["light", "dark"], onChange: setTheme },
    });

    return <div>Hello, {name}!</div>;
}
```

**就这样!** 新闻 `Ctrl+Shift+A` 切换面板.

## 控制类型

所有13个可用的控制类型:

```tsx
{
  text: { type: "text", value: string, onChange: (v) => void }
  number: { type: "number", value: number, min?: number, max?: number, onChange: (v) => void }
  boolean: { type: "boolean", value: boolean, onChange: (v) => void }
  select: { type: "select", value: string, options: string[], onChange: (v) => void }
  multiselect: { type: "multiselect", value: string[], options: string[], onChange: (v) => void }
  color: { type: "color", value: string, onChange: (v) => void }
  range: { type: "range", value: number, min: number, max: number, step?: number, onChange: (v) => void }
  date: { type: "date", value: string, min?: string, max?: string, onChange: (v) => void }
  button: { type: "button", onClick: () => void }
  buttonGroup: { type: "buttonGroup", buttons: Array<{label: string, onClick: () => void}> }
  dragAndDrop: { type: "dragAndDrop", onChange: (files: FileList) => void }
  localStorage: { type: "localStorage", onRefresh?: () => void }
  separator: { type: "separator", variant?: "line" | "label" | "space" }
}
```

**共同选项** (大多数控制有):

-   `label?: string` - 显示标签
-   `description?: string` - 帮助文本
-   `disabled?: boolean` - 禁用控件
-   `persist?: boolean` - 自动保存到本地Storage

📖 **[全面控制文件 −](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/CONTROLS.md)**

## 配置

### 自定义热键

```tsx
useDevPanel("Settings", controls, {
    hotKeyConfig: { key: "d", ctrlKey: true, shiftKey: true },
});
```

### 从控制台打开

一旦使用面板,a `devPanel` 可在 `window` 这样你就可以开车了 直接取自浏览器控制台——当热键与另一个快捷键相冲突时方便:

```js
devPanel.open(); // show the panel
devPanel.close(); // hide it
devPanel.toggle(); // flip visibility (same as the hotkey)
```

第一个(启用)时自动注册 `useDevPanel` 电话挂载,所以它不是 存在于已禁用面板的建筑中.

### 小组讨论会 主题

```tsx
useDevPanel("Settings", controls, {
    theme: "neon", // 21 built-in themes available
    panelTitle: "My Dev Panel",
});
```

### 事件处理

选择何时触发更新 :

```tsx
{
  type: "text",
  value: searchTerm,
  event: "onChange", // Update on every keystroke (default)
  onChange: setSearchTerm
}

{
  type: "text",
  value: apiKey,
  event: "onBlur", // Update only when focus is lost
  onChange: setApiKey
}
```

### 生产中的缺陷

使用 `enabled` 在运行时关闭面板。 何时 `false`电话是 no-op — 区域没有注册, 面板没有挂载 。 默认为 `true`。 。 。 .

```tsx
useDevPanel("Settings", controls, {
    enabled: import.meta.env.DEV, // Vite
    // enabled: process.env.NODE_ENV !== "production", // Webpack / Next / CRA
});
```

> ⚠️ **`enabled` 不删除您捆绑的面板.** 挡住面板 _运行_,但库代码仍然被导入并运入用户. 要剥去 生产外的代码完全构建(例如,一个为软件包打分的Vite插件),参见 页:1 **[制作和安全部门改革指南](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/PRODUCTION.md)**。 。 。 .

### 安全部门改革/下一个.js

软件包在服务器上是安全导入的( 它从不触碰) `document`编号 :`localStorage` 时间 (进口时间)和船舶 `"use client"` 指令,所以它根据 Next.js App工作 路由器. 面板只挂载客户端.

📖 **[样式指南](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/STYLING.md)** | **[事件处理](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/EVENT_HANDLING.md)** | **[高级用途](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/ADVANCED_USAGE.md)** | **[生产和安全部门改革](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/PRODUCTION.md)**

## 文档

**指南:**

-   [控制类型](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/CONTROLS.md) - 所有12个有实例的控制类型
-   [持久性](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/PERSISTENCE.md) - 自动保存到本地Storage
-   [样式和主题](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/STYLING.md) - 主题和CSS定制
-   [事件处理](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/EVENT_HANDLING.md) - 在变换对Blur策略
-   [高级使用](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/ADVANCED_USAGE.md) - 复杂模式和优化
-   [生产和安全部门改革](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/PRODUCTION.md) - 禁止生产、捆绑剥离、下个J
-   [套装大小](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/BUNDLE_SIZE.md) - 大小跟踪和优化
-   [发展](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/DEVELOPMENT.md) - 贡献和设置

**现场实例 :**

-   [故事书](https://berenjenas.github.io/react-dev-panel/) - 互动组件演示
-   本地运行 : `npm run storybook`

## API 参考

### `useDevPanel(sectionName, controls, options?)`

**参数:**

-   `sectionName: string` - 这个控制组的独特标识符
-   `controls: ControlsGroup` - 控制定义的对象映射控制密钥
-   `options?: DevPanelProps` - 可选配置

**选项 :**

```tsx
{
  panelTitle?: string;           // Custom panel header
  theme?: string;                // Built-in theme name
  enabled?: boolean;             // Activate this call (default true; false = no-op)
  hotKeyConfig?: {               // Custom toggle hotkey
    key: string;
    ctrlKey?: boolean;
    shiftKey?: boolean;
    altKey?: boolean;
    metaKey?: boolean;
  }
}
```

> `enabled` 闸门运行时的行为——它不会从您的捆绑中移除面板. 见 **[制作和安全部门改革指南](https://npmcn.com/package/%40berenjena/react-dev-panel/guides/PRODUCTION.md)** 建造时间剥取.

## 捐款

欢迎捐款! 见 [捐款额](https://npmcn.com/package/%40berenjena/react-dev-panel/CONTRIBUTING.md) 准则.

**发展:**

```bash
git clone https://github.com/Berenjenas/react-dev-panel.git
cd react-dev-panel
npm install
npm run storybook
```

## 许可证

麻省理工学院 [贝伦捷纳](https://berenjena.com.ar/)

* * *

**链接 :** [国家预防机制](https://www.npmjs.com/package/@berenjena/react-dev-panel) • 妇女 [GitHub 图像](https://github.com/Berenjenas/react-dev-panel) • 妇女 [问题](https://github.com/Berenjenas/react-dev-panel/issues) • 妇女 [贝伦捷纳](https://berenjena.com.ar/)

* * *

由美国制造 [贝伦捷纳](https://berenjena.com.ar/) 团队

## 常见问题

### @berenjena/react-dev-panel 是什么？

反应开发小组,拥有各种工具和公用事业\.

### 如何安装 @berenjena/react-dev-panel？

在项目目录运行 npm install @berenjena/react-dev-panel，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @berenjena/react-dev-panel 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @berenjena/react-dev-panel 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @berenjena/react-dev-panel 可以商用吗？

@berenjena/react-dev-panel 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @berenjena/react-dev-panel 的下载量有多少？

根据 npm 官方下载统计，@berenjena/react-dev-panel 在 2026/10/08 – 2026/11/06 这 30 天内被下载 6,555 次，日均约 219 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @berenjena/react-dev-panel 还在维护吗？

最新版本 2\.5\.1 发布于 2026/06/22（4 个月前）；至今共发布 19 个版本，其中过去 12 个月发布了 5 个；首次发布于 2025/07/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。