data-on-resize

Run an expression when the element’s size changes. Backed by ResizeObserver, which also fires once when observation starts.

Syntax

data-on-resize="$w = el.offsetWidth"
data-on-resize__debounce.100ms="…"

part
key	forbidden
value	required: statements

Modifiers

modifier	effect
__debounce.ms / __throttle.ms	timing

Measure an element

textarea size

drag my corner

× px

<div data-signals="{ w: 0, h: 0 }">
  <textarea data-on-resize="$w = el.offsetWidth; $h = el.offsetHeight" style="width:12rem">drag my corner</textarea>
  <p><b data-text="$w"></b> × <b data-text="$h"></b> px</p>
</div>

Container queries in JavaScript

React to the element’s own width rather than the viewport: a card that switches to a stacked layout when it gets narrow.

compact below 360px

drag the corner:

<div data-signals="{ compact: false }" data-on-resize__throttle.50ms="$compact = el.offsetWidth < 360" style="resize:horizontal;overflow:auto;border:1px dashed var(--sl-color-hairline);padding:.5rem;min-width:12rem">
  <div data-class:stacked="$compact" data-style="{ display: 'flex', flexDirection: $compact ? 'column' : 'row', gap: '.5rem' }">
    <div class="box" style="flex:1;height:2rem"></div><div class="box" style="flex:1;height:2rem"></div>
  </div>
  <p class="muted">drag the corner: <b data-text="$compact ? 'stacked' : 'side by side'"></b></p>
</div>

Notes

el is in scope. The first run happens when the observer connects, so the signals are populated on mount without a data-init.

Register

import { onResize } from 'sigmx/plugins'

Registering onResize adds 372 bytes brotli (414 gzip, 941 minified) on top of the core. See bundle sizes.