11

Resize Handler

Track window and element resize events with ResizeObserver

Best experienced on desktop with mouse/pointer support

Basic Resize Detection

Resize the boxes below to see real-time dimension updates:

Resizable Box 1

Width: px

Height: px

💡 Drag the resize handle in the bottom-right corner

Resizable Box 2

Width: px

Height: px

💡 Drag the resize handle in the bottom-right corner

Responsive Breakpoint Detection

This container changes its layout based on its own width (container queries simulation):

Responsive Container

Item 1
Item 2
Item 3
Item 4

Current layout:

💡 Drag the right edge to change container width

Throttling and Debouncing

Different timing strategies for performance optimization:

Throttle (50ms)

Updates:

💡 Drag corner to resize - updates every 50ms

Debounce (150ms)

Updates:

💡 Drag corner to resize - updates after 150ms pause

Throttle (500ms)

Updates:

💡 Drag corner to resize - updates every 500ms

Window vs Element Dimensions

Access both element and window dimensions for responsive design:

Dimension Reporter

Element Width: px

Element Height: px

Window Width: px

Window Height: px

Element vs Window: % of window width

💡 Drag corners to resize this container

Dynamic Content Addition

New elements automatically get resize detection:

Performance Information

Implementation Details

  • Single shared ResizeObserver for all elements
  • WeakMap for memory-efficient element tracking
  • Automatic cleanup when elements are removed
  • Configurable throttling (default 16ms) and debouncing
  • Rounded dimensions to avoid float precision issues
  • RAF-based throttling for smooth animations

API Usage

  • data_resize="$width = $resize_width; $height = $resize_height" - Direct assignment
  • data_resize=(signal.add(1), dict(throttle=50)) - With throttling
  • data_resize=(signal.add(1), dict(debounce=150)) - With debouncing
  • Available variables: resize_width, resize_height, resize_window_width, resize_window_height
  • Also: resize_aspect_ratio, resize_current_breakpoint, resize_is_mobile/tablet/desktop
  • Breakpoints: resize_xs, resize_sm, resize_md, resize_lg, resize_xl