Hooks

useResizeObserver / useElementSize

Two hooks built on ResizeObserver with automatic cleanup and reactive target support. useElementSize is the ergonomic shortcut that returns reactive width and height directly. useResizeObserver gives you raw access to ResizeObserverEntry for advanced use cases. Both are SSR-safe.

useElementSize

The simplest way to track element dimensions. Returns an object with reactive width and height that update on every resize. Both start at 0 and set after the first observer callback.

Drag to resize

0 × 0 px

<script lang="ts">
  import { useElementSize } from 'sv5ui';

  let el = $state<HTMLDivElement>();
  const size = useElementSize(() => el);
</script>

<div bind:this={el} class="resize overflow-auto rounded border p-4" style="min-width:120px; min-height:60px;">
  Resize me
</div>
<p>{size.width.toFixed(0)} × {size.height.toFixed(0)} px</p>

useResizeObserver - raw callback

When you need the full ResizeObserverEntry - e.g. to read borderBoxSize or handle multiple elements - use useResizeObserver directly.

Drag to resize

contentRect: 0 × 0 px

<script lang="ts">
  import { useResizeObserver } from 'sv5ui';

  let el = $state<HTMLDivElement>();
  let entries = $state<ResizeObserverEntry[]>([]);

  useResizeObserver(() => el, (newEntries) => {
    entries = newEntries;
  });
</script>

<div bind:this={el} class="resize overflow-auto rounded border p-4" style="min-width:120px;">
  Resize me
</div>
{#each entries as entry}
  <p>
    width: {entry.contentRect.width.toFixed(0)},
    height: {entry.contentRect.height.toFixed(0)}
  </p>
{/each}

Observer options

Pass ResizeObserverOptions as the third argument to control which box model to measure.

See code - logs to console.

<script lang="ts">
  import { useResizeObserver } from 'sv5ui';

  let el = $state<HTMLDivElement>();

  // Use border-box sizing instead of content-box (default)
  useResizeObserver(() => el, ([entry]) => {
    const [box] = entry.borderBoxSize;
    console.log('border-box width:', box.inlineSize);
  }, { box: 'border-box' });
</script>

<div bind:this={el} class="resize overflow-auto rounded border p-4" style="min-width:120px;">
  Resize me
</div>

useElementSize - Parameters

Parameter	Type	Default	Description
`target`	`HTMLElement \| (() => HTMLElement \| null) \| null`	`-`	`The element to track. A getter is resolved reactively.`

useElementSize - Return

Property	Type	Default	Description
`width`	`number`	`0`	`Current content-box width in pixels. Reactive.`
`height`	`number`	`0`	`Current content-box height in pixels. Reactive.`

useResizeObserver - Parameters

Parameter	Type	Default	Description
`target`	`HTMLElement \| (() => HTMLElement \| null) \| null`	`-`	`The element to observe. A getter re-attaches as the target changes.`
`callback`	`ResizeObserverCallback`	`-`	`Fired on every size change with the full ResizeObserverEntry array.`
`options`	`ResizeObserverOptions`	`undefined`	`Options passed to observer.observe(). Use { box: 'border-box' } for border-box sizing.`

useEventListener useScrollLock