responsive-panel

v1.0.0

Published

6 months ago

A development tool that helps frontend developers visualize and test responsive design breakpoints in real-time

Responsive Panel 🎯

A powerful development tool that helps frontend developers visualize and test responsive design breakpoints in real-time. It provides a floating panel that shows your webpage across multiple viewport sizes simultaneously, with fullscreen mode for detailed testing.

🚀 Features

📱 Multi-viewport preview - See your site across different breakpoints simultaneously
🖱️ Fullscreen mode - Click viewport headers for detailed breakpoint testing
🎯 Smart trigger hiding - No recursive panels in iframe views
🔧 Draggable interface - Move panel and floating button independently
⚡ Live sync - Synchronized scrolling and form inputs across viewports
🎨 Theme support - Light, dark, or auto themes
🛡️ Dev-only - Automatically disabled in production
📦 Framework agnostic - Works with React, Vue, Angular, vanilla JS

📦 Installation

npm install responsive-panel --save-dev

🎯 Quick Start

ES Modules

import { ResponsivePanel } from "responsive-panel";

const panel = new ResponsivePanel({
  position: "top-right",
  showLabels: true,
  breakpoints: [320, 576, 768, 992, 1200, 1400],
  labels: ["Mobile", "Small", "Medium", "Large", "XL", "XXL"],
});

Auto-injection

import { injectResponsivePanel } from "responsive-panel";

// Simple injection with defaults
injectResponsivePanel();

// With custom config
injectResponsivePanel({
  position: "bottom-left",
  theme: "dark",
  liveSync: true,
});

⚙️ Configuration

| Option | Type | Default | Description | | ------------- | ---------- | ----------------------------- | --------------------------------------- | | breakpoints | number[] | [320, 480, 768, 1024, 1280] | Viewport widths in pixels | | labels | string[] | [] | Custom labels for breakpoints | | position | string | 'bottom-right' | Position of floating button | | theme | string | 'auto' | UI theme: 'light', 'dark', 'auto' | | liveSync | boolean | false | Sync interactions across viewports | | showLabels | boolean | true | Show breakpoint labels | | zIndex | number | 10000 | Z-index for panel overlay |

🎮 Usage

Open Panel: Click the floating button
Fullscreen Mode: Click any viewport header for detailed view
Navigate Back: Use "Back to Dashboard" button
Drag Panel: Click and drag the panel header
Move Button: Drag the floating button to reposition

🔧 API Reference

Methods

const panel = new ResponsivePanel(config);

panel.open(); // Open the panel
panel.close(); // Close the panel
panel.toggle(); // Toggle panel visibility
panel.destroy(); // Clean up and remove panel

// Event handling
panel.on("open", () => console.log("Panel opened"));
panel.on("enterFullscreen", (event, viewport) =>
  console.log("Fullscreen:", viewport)
);

Events

open - Panel opened
close - Panel closed
enterFullscreen - Entered fullscreen mode
exitFullscreen - Exited fullscreen mode
drag - Panel or button dragged

🎨 Themes

The panel supports three themes:

Light: Clean light interface
Dark: Dark mode for night development
Auto: Follows system preference

🛡️ Production Safety

The responsive panel automatically detects production environments and disables itself to prevent accidental inclusion in production builds.

📄 License

MIT © Responsive Panel

🤝 Contributing

Contributions are welcome! Please read our Code of Conduct and check the API documentation for development guidelines.

pnpm

pnpm add responsive-panel --save-dev

GitHub Packages

npm install @xarlizard/responsive-panel

Note: For GitHub Packages, you'll need to configure your .npmrc file. See PUBLISHING.md for details.

🚀 Quick Start

Basic Usage

// index.js or main entry point
import { injectResponsivePanel } from "responsive-panel";

if (process.env.NODE_ENV !== "production") {
  injectResponsivePanel();
}

React Example

import React, { useEffect } from "react";
import { injectResponsivePanel } from "responsive-panel";

function App() {
  useEffect(() => {
    if (process.env.NODE_ENV !== "production") {
      const panel = injectResponsivePanel({
        breakpoints: [320, 480, 768, 1024, 1280],
        theme: "auto",
        liveSync: true,
      });

      return () => panel?.destroy();
    }
  }, []);

  return <div>Your app content</div>;
}

Vue Example

<template>
  <div>Your app content</div>
</template>

<script>
import { injectResponsivePanel } from "responsive-panel";

export default {
  mounted() {
    if (process.env.NODE_ENV !== "production") {
      this.panel = injectResponsivePanel();
    }
  },
  beforeDestroy() {
    this.panel?.destroy();
  },
};
</script>

Script Tag Usage

<script
  src="https://unpkg.com/responsive-panel@latest/dist/index.esm.js"
  type="module"
  data-breakpoints="[320, 480, 768, 1024, 1280]"
  data-theme="dark"
  data-position="bottom-right"
></script>

📚 Configuration

injectResponsivePanel({
  // Array of breakpoint widths in pixels
  breakpoints: [320, 480, 768, 1024, 1280],

  // Position of the floating trigger button
  position: "bottom-right", // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

  // Theme for the panel UI
  theme: "auto", // 'light' | 'dark' | 'auto'

  // Whether to enable live sync between viewports
  liveSync: false,

  // Custom CSS class for the panel container
  className: "my-custom-panel",

  // Whether to show labels for each breakpoint
  showLabels: true,

  // Custom labels for breakpoints
  labels: ["Mobile", "Tablet", "Desktop"],

  // Z-index for the panel overlay
  zIndex: 999999,

  // Whether the panel starts minimized
  startMinimized: false,

  // Custom breakpoint configurations
  customBreakpoints: [
    { width: 320, height: 568, label: "iPhone SE", enabled: true },
    { width: 768, height: 1024, label: "iPad", enabled: true },
    { width: 1440, height: 900, label: "MacBook", enabled: true },
  ],
});

📖 API Reference

`injectResponsivePanel(config?)`

Injects the responsive panel into the current page.

Parameters:

config (optional): Configuration object

Returns: ResponsivePanel instance or null in production