React Debug Board

A customizable debug console component for React applications that automatically captures all console logs.

Features

• 🚀 Real-time log display
• 🔍 Filter logs by type (log, warn, error)
• 📚 Stack trace support
• 📱 Responsive and minimizable interface
• ✨ Smooth animations using Framer Motion
• 🎨 Customizable styling
• 🔄 Auto-scrolling to latest logs

Installation

npm install @ernesto248/react-debug-board

Usage

import { DebugBoard } from "@ernesto248/react-debug-board";

function App() {
  return (
    <div className="debug-board">
      <DebugBoard />
    </div>
  );
}

API Reference

useDebugLogs Hook

const { logs, addLog, clearLogs } = useDebugLogs();

Methods:

• addLog(log: LogEntry): Add a new log entry
• clearLogs(): Clear all logs
• logs: Array of current log entries

LogEntry Type:

type LogEntry = {
  type: "log" | "warn" | "error";
  message: string;
  stack?: string;
  timestamp?: number; // Auto-generated if not provided
  id?: string; // Auto-generated if not provided
};

DebugBoard Component

<DebugBoard />

Features:

• Minimize/Maximize toggle
• Stack trace toggle
• Clear logs button
• Log type filters
• Auto-scrolling log container

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT