)
A powerful, type-safe development panel for React that allows developers to inspect and control component props, manage state, and accelerate prototyping directly within the application UI.
- ποΈ Rich Control Types - Boolean, Number, Text, Select, Color, Range, Date, Button, ButtonGroup, and Separator controls
- οΏ½ Automatic Persistence - Control values automatically saved to localStorage and restored on reload
- οΏ½π Zero Configuration - Auto-mounting and unmounting, no providers or setup required
- π¨ Themeable - Built-in themes and CSS custom properties for customization
- β¨οΈ Keyboard Shortcuts - Customizable hotkeys for panel toggle
- π TypeScript First - Full type safety and IntelliSense support
- Auto State Management - Automatic portal rendering and lifecycle management
- π¦ Lightweight - Only requires React as peer dependency
npm install -D @berenjena/react-dev-panelyarn add -D @berenjena/react-dev-panelpnpm add -D @berenjena/react-dev-panelThe package exposes a single hook: useDevPanel. This hook handles everything automatically:
- Auto-mounting: Creates and mounts the dev panel UI when first called
- Auto-unmounting: Removes the panel from DOM when no controls are active
- State management: Manages all internal state and control synchronization
- Portal rendering: Renders the panel outside your component tree
import { useState } from "react";
import { useDevPanel } from "@berenjena/react-dev-panel";
function App() {
const [name, setName] = useState("John Doe");
const [age, setAge] = useState(25);
const [isActive, setIsActive] = useState(true);
const [theme, setTheme] = useState("dark");
useDevPanel("User Settings", {
name: {
type: "text",
value: name,
label: "Full Name",
persist: true, // Automatically save and restore value
onChange: setName,
},
age: {
type: "number",
value: age,
label: "Age",
min: 0,
max: 120,
persist: true, // Value persists across page reloads
onChange: setAge,
},
isActive: {
type: "boolean",
value: isActive,
label: "Active User",
persist: true,
onChange: setIsActive,
},
theme: {
type: "select",
value: theme,
label: "Theme",
options: ["light", "dark", "auto"],
persist: true,
onChange: setTheme,
},
});
return (
<div>
<h1>Hello, {name}!</h1>
<p>Age: {age}</p>
<p>Status: {isActive ? "Active" : "Inactive"}</p>
<p>Theme: {theme}</p>
</div>
);
}That's it! No additional components or providers needed. The hook automatically handles the entire panel lifecycle.
React Dev Panel provides rich control types for different data types. Here are some quick examples:
{
type: 'text',
value: 'Hello World',
label: 'Message',
placeholder: 'Enter message...',
persist: true, // Value automatically saved to localStorage
onChange: (value: string) => setValue(value),
}{
type: 'number',
value: 42,
label: 'Count',
min: 0,
max: 100,
persist: true, // Persists across page reloads
onChange: (value: number) => setValue(value),
}{
type: 'boolean',
value: true,
label: 'Enable Feature',
persist: true, // Checkbox state is remembered
onChange: (value: boolean) => setValue(value),
}{
type: 'color',
value: '#ff6200',
label: 'Theme Color',
persist: true, // Color choice is automatically saved
onChange: (value: string) => setValue(value),
}{
type: 'button',
label: 'Reset Values',
onClick: () => resetToDefaults(),
}π View all control types and detailed documentation β
The dev panel uses CSS custom properties for easy theming. Here's a quick example:
:root {
--dev-panel-background-color: #1a1a1a;
--dev-panel-text-color: #ffffff;
--dev-panel-accent-color: #ff6200;
--dev-panel-border-color: #333333;
}π Complete theming guide and customization options β
The dev panel supports customizable keyboard shortcuts. The default hotkey is Ctrl+Shift+A:
useDevPanel("My Section", controls, {
hotKeyConfig: {
key: "d", // The key to press
ctrlKey: true, // Requires Ctrl key
shiftKey: false, // Requires Shift key
altKey: true, // Requires Alt key
metaKey: false, // Requires Meta/Cmd key (Mac)
},
});You can call useDevPanel from multiple components to create organized sections:
function App() {
// In UserProfile.tsx
useDevPanel("User Profile", {
name: { type: "text", value: name, onChange: setName },
avatar: { type: "text", value: avatar, onChange: setAvatar },
});
// In AppSettings.tsx
useDevPanel("App Settings", {
theme: { type: "select", value: theme, options: ["light", "dark"], onChange: setTheme },
debug: { type: "boolean", value: debug, onChange: setDebug },
});
// Both sections appear in the same panel automatically
return <YourApp />;
}Customize the panel's appearance and behavior:
useDevPanel("My Section", controls, {
panelTitle: "Custom Panel Title",
theme: "dark", // Built-in themes: light, dark, neon, etc.
hotKeyConfig: {
// Custom toggle hotkey (default: Ctrl+Shift+A)
key: "f",
ctrlKey: true,
shiftKey: true,
altKey: false,
metaKey: false,
},
});React Dev Panel supports two different event handling strategies for input controls:
onChange Event: Provides real-time updates as the user types or interacts with the control. This is ideal for immediate feedback and live previews, but may trigger more frequent re-renders.
onBlur Event: Updates the value only when the user finishes interacting with the control (loses focus). This approach is more performance-friendly for expensive operations and provides a better user experience when dealing with API calls or heavy computations.
{
type: 'text',
value: searchTerm,
event: 'onChange', // Real-time updates
onChange: setSearchTerm,
}
{
type: 'number',
value: price,
event: 'onBlur', // Update only when focus is lost
onChange: setPrice,
}- Control Types - Complete guide to all available controls
- Data Persistence - Automatic value persistence and state management
- Event Handling - onChange vs onBlur strategies and best practices
- Styling & Theming - Customization, themes, and responsive design
- Advanced Usage - Complex patterns, state management, and optimization
- Development Guide - Setup, contributing, and project structure
The only export from this package. This hook manages the entire dev panel lifecycle and handles all the heavy lifting for you.
Parameters:
sectionName- Unique identifier for the control groupcontrols- Object containing control definitionsdevPanelProps- Optional panel configuration (title, theme, hotkeys)
What it does automatically:
- Portal Management: Creates a React portal on first use and renders the panel outside your component tree
- State Synchronization: Keeps all controls in sync across multiple component instances
- Lifecycle Management: Mounts the panel when controls are registered, unmounts when all controls are removed
- Memory Management: Cleans up subscriptions and DOM elements when components unmount
- Theme Application: Applies theme configurations and CSS custom properties
Want to contribute or set up the project locally?
React Dev Panel maintains high code quality standards with comprehensive tooling:
- π ESLint - Comprehensive linting for TypeScript and React
- π Prettier - Automatic code formatting
- π¨ Stylelint - CSS/SCSS linting and formatting
- π Commitlint - Conventional commit message validation
- πͺ Husky - Pre-commit hooks for quality assurance
- π¦ Changesets - Automated version management and releases
All quality checks run automatically via pre-commit hooks, ensuring consistent code quality.
π Development setup, contributing guidelines, and project structure β
Explore all components and controls in our Storybook:
npm run storybookVisit http://localhost:6006 to see interactive examples and documentation.
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Made with β€οΈ by the Berenjena team