反应 Dev 面板
)
一个轻量级,型式安全的React开发面板,允许您在开发过程中实时控制组件状态和道具.
特征
- 一个虎克单人
useDevPanel钩子 - 没有提供者, 没有设置 - 13 控制类型: 文本、 数字、 布尔、 选择、 颜色、 范围、 日期、 按钮、 本地套接字等
- 自动持续: 控制值的可选本地Storage同步
- 类型安全: IntelliSense 的完整类型脚本支持
- 可主题: 21个内置主题+CSS自定义属性
- 轻巧: ~16 KB gziped, 零运行时间依赖性
安装
npm install -D @berenjena/react-dev-panel
快速启动
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个可用的控制类型:
{
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
📖 全面控制文件 −
配置
自定义热键
useDevPanel("Settings", controls, {
hotKeyConfig: { key: "d", ctrlKey: true, shiftKey: true },
});
从控制台打开
一旦使用面板,a devPanel 可在 window 这样你就可以开车了
直接取自浏览器控制台——当热键与另一个快捷键相冲突时方便:
devPanel.open(); // show the panel
devPanel.close(); // hide it
devPanel.toggle(); // flip visibility (same as the hotkey)
第一个(启用)时自动注册 useDevPanel 电话挂载,所以它不是
存在于已禁用面板的建筑中.
小组讨论会 主题
useDevPanel("Settings", controls, {
theme: "neon", // 21 built-in themes available
panelTitle: "My Dev Panel",
});
事件处理
选择何时触发更新 :
{
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。 。 。 .
useDevPanel("Settings", controls, {
enabled: import.meta.env.DEV, // Vite
// enabled: process.env.NODE_ENV !== "production", // Webpack / Next / CRA
});
⚠️
enabled不删除您捆绑的面板. 挡住面板 运行,但库代码仍然被导入并运入用户. 要剥去 生产外的代码完全构建(例如,一个为软件包打分的Vite插件),参见 页:1 制作和安全部门改革指南。 。 。 .
安全部门改革/下一个.js
软件包在服务器上是安全导入的( 它从不触碰) document编号 :localStorage 时间
(进口时间)和船舶 "use client" 指令,所以它根据 Next.js App工作
路由器. 面板只挂载客户端.
📖 样式指南 | 事件处理 | 高级用途 | 生产和安全部门改革
文档
指南:
- 控制类型 - 所有12个有实例的控制类型
- 持久性 - 自动保存到本地Storage
- 样式和主题 - 主题和CSS定制
- 事件处理 - 在变换对Blur策略
- 高级使用 - 复杂模式和优化
- 生产和安全部门改革 - 禁止生产、捆绑剥离、下个J
- 套装大小 - 大小跟踪和优化
- 发展 - 贡献和设置
现场实例 :
- 故事书 - 互动组件演示
- 本地运行 :
npm run storybook
API 参考
useDevPanel(sectionName, controls, options?)
参数:
sectionName: string- 这个控制组的独特标识符controls: ControlsGroup- 控制定义的对象映射控制密钥options?: DevPanelProps- 可选配置
选项 :
{
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闸门运行时的行为——它不会从您的捆绑中移除面板. 见 制作和安全部门改革指南 建造时间剥取.
捐款
欢迎捐款! 见 捐款额 准则.
发展:
git clone https://github.com/Berenjenas/react-dev-panel.git
cd react-dev-panel
npm install
npm run storybook
许可证
麻省理工学院 贝伦捷纳
链接 : 国家预防机制 • 妇女 GitHub 图像 • 妇女 问题 • 妇女 贝伦捷纳
由美国制造 贝伦捷纳 团队