React Dev P- Zero Configuration - Auto-mounting and unmounting, no providers or setup requirednel

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.

✨ Features

• 🎛️ 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

📦 Installation

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

yarn add -D @berenjena/react-dev-panel

pnpm add -D @berenjena/react-dev-panel

Quick Start

The 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

Basic Usage

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.

🎛️ Control Types

React Dev Panel provides rich control types for different data types. Here are some quick examples:

Text Control

{
  type: 'text',
  value: 'Hello World',
  label: 'Message',
  placeholder: 'Enter message...',
  persist: true, // Value automatically saved to localStorage
  onChange: (value: string) => setValue(value),
}

Number Control

{
  type: 'number',
  value: 42,
  label: 'Count',
  min: 0,
  max: 100,
  persist: true, // Persists across page reloads
  onChange: (value: number) => setValue(value),
}

Boolean Control

{
  type: 'boolean',
  value: true,
  label: 'Enable Feature',
  persist: true, // Checkbox state is remembered
  onChange: (value: boolean) => setValue(value),
}

Color Control

{
  type: 'color',
  value: '#ff6200',
  label: 'Theme Color',
  persist: true, // Color choice is automatically saved
  onChange: (value: string) => setValue(value),
}

Button Control

{
  type: 'button',
  label: 'Reset Values',
  onClick: () => resetToDefaults(),
}

📖 View all control types and detailed documentation →

🎨 Styling and Theming

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 →

⌨️ Keyboard Shortcuts

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)
	},
});

Advanced Usage

Multiple Panel Sections

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 />;
}

Panel Configuration

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,
	},
});

Event Handling Options

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,
}

📚 Documentation

Core Guides

• 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

• Development Guide - Setup, contributing, and project structure

📚 API Reference

useDevPanel(sectionName, controls, devPanelProps?)

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 group
• controls - Object containing control definitions
• devPanelProps - 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

🛠️ Development

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 →

📖 Storybook

Explore all components and controls in our Storybook:

npm run storybook

Visit http://localhost:6006 to see interactive examples and documentation.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🔗 Links

• NPM Package
• GitHub Repository
• Bug Reports
• Berenjena

Made with ❤️ by the Berenjena team