resize-panel v1.0.0

Resize Panel Web Component

A lightweight, customisable web component that creates resizable panels with real-time dimension display. Perfect for creating adjustable containers, preview windows, and interactive content areas in your web applications.

Contents

• Introduction
• Installation
• Basic Usage
• Common Use Cases
• Framework Integration
• Styling Guide
• API Reference
• Browser Support

Introduction

The Resize Panel component offers:

• 🔄 Resizable containers with live dimension display
• 🎨 Light and dark theme support
• 📱 Responsive design capabilities
• 🖼️ Iframe support with loading states
• ⚙️ Comprehensive customisation options
• 🎯 Event handling for resize actions

Installation

Via NPM

npm install resize-panel

Via CDN

<script type="module">
  import { ResizePanel } from 'https://unpkg.com/resize-panel/resize-panel.js';
</script>

Basic Usage

Simple Panel

<resize-panel>
  <div>Drag the bottom-right corner to resize me!</div>
</resize-panel>

Custom Dimensions

<resize-panel w="30rem" h="20rem">
  <div>Panel with custom size</div>
</resize-panel>

Common Use Cases

Content Viewer

<resize-panel
  w="40rem"
  h="25rem"
  min-w="20rem"
  data-display-position="top-right"
>
  <div class="content-wrapper">
    <h2>Article Preview</h2>
    <article>
      <p>Your content here...</p>
    </article>
  </div>
</resize-panel>

Website Preview Panel

<resize-panel
  src="https://example.com"
  w="50rem"
  h="30rem"
  min-w="25rem"
  min-h="15rem"
  data-display-position="bottom-right"
>
</resize-panel>

Image Gallery Panel

<resize-panel
  w="35rem"
  h="25rem"
  data-theme="dark"
  data-display-position="bottom-left"
>
  <div style="padding: 1rem;">
    <img
      src="gallery-image.jpg"
      alt="Gallery Image"
      style="max-width: 100%; height: auto;"
    />
    <div class="caption">Image Caption</div>
  </div>
</resize-panel>

Code Editor Setup

<resize-panel w="40rem" h="30rem" data-theme="dark">
  <div class="editor-container">
    <textarea
      style="width: 100%; 
                   height: 100%; 
                   background: #1e1e1e; 
                   color: #fff; 
                   font-family: monospace; 
                   padding: 1rem;"
    >
function greet(name) {
    return `Hello, ${name}!`;
}
        </textarea
    >
  </div>
</resize-panel>

Framework Integration

React Integration

import { useEffect, useRef } from 'react';
import 'resize-panel';

function ResizableEditor() {
  const panelRef = useRef(null);

  useEffect(() => {
    // Initial size setup
    panelRef.current?.resizeTo('35rem', '25rem');
  }, []);

  const handleResize = (e) => {
    const { width, height } = e.detail;
    console.log(`Editor resized to ${width} × ${height}`);
  };

  return (
    <resize-panel
      ref={panelRef}
      w="30rem"
      h="20rem"
      data-theme="dark"
      onResize={handleResize}
    >
      <div className="editor-content">
        <h3>React Editor</h3>
        <textarea />
      </div>
    </resize-panel>
  );
}

Vue Integration

<template>
  <div class="editor-wrapper">
    <resize-panel w="30rem" h="20rem" @resize="handleResize" data-theme="dark">
      <div class="editor-content">
        <h3>Vue Editor</h3>
        <textarea v-model="content" />
      </div>
    </resize-panel>
  </div>
</template>

<script>
import 'resize-panel';

export default {
  name: 'ResizableEditor',
  data() {
    return {
      content: '',
    };
  },
  methods: {
    handleResize(e) {
      const { width, height } = e.detail;
      console.log(`Editor resized to ${width} × ${height}`);
    },
  },
};
</script>

Styling Guide

Custom Theme Example

resize-panel {
  /* Light theme */
  --resize-panel-bg: #ffffff;
  --resize-panel-border: #e2e8f0;
  --resize-panel-text: #1a202c;
  --resize-panel-shadow: rgba(0, 0, 0, 0.1);
  --resize-panel-resize-bg: rgba(0, 0, 0, 0.8);
  --resize-panel-resize-text: #ffffff;
}

/* Dark theme override */
resize-panel[data-theme='dark'] {
  --resize-panel-bg: #1a202c;
  --resize-panel-border: #2d3748;
  --resize-panel-text: #f7fafc;
  --resize-panel-shadow: rgba(0, 0, 0, 0.4);
  --resize-panel-resize-bg: rgba(255, 255, 255, 0.9);
  --resize-panel-resize-text: #000000;
}

Responsive Layout Example

<style>
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
  }
</style>

<div class="dashboard-grid">
  <resize-panel w="100%" h="20rem">
    <div>Dashboard Panel 1</div>
  </resize-panel>
  <resize-panel w="100%" h="20rem" data-theme="dark">
    <div>Dashboard Panel 2</div>
  </resize-panel>
</div>

API Reference

Attributes

Events

// Monitor size changes
const panel = document.querySelector('resize-panel');
panel.addEventListener('resize', (e) => {
  const { width, height } = e.detail;
  console.log(`Panel dimensions: ${width} × ${height}`);
});

Methods

const panel = document.querySelector('resize-panel');

// Change size programmatically
panel.resizeTo('40rem', '30rem');

// Get current dimensions
const currentWidth = panel.width;
const currentHeight = panel.height;

Browser Support

• Chrome/Edge 80+
• Firefox 75+
• Safari 13.1+

Licence

MIT

For issues, feature requests, or contributions, please visit our GitHub repository.