S Svelora

Quick Example

useResizeObserver / useElementSize Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `use-resize-observer`

Code

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

 let box = $state<HTMLElement | null>(null);
 const size = useElementSize(() => box);
</script>

<div bind:this={box}>
 {Math.round(size.width)} x {Math.round(size.height)}
</div>

useResizeObserver / useElementSize

Observe an element's size with a ResizeObserver and automatic cleanup. useElementSize returns the reactive content-box size; the target may be a value or a reactive getter. SSR-safe.

useElementSize

Drag the bottom-right corner of the box — the size updates live.

0 × 0

useResizeObserver (lower-level callback)

The raw callback reads each entry's contentRect. Here it maps the width to a responsive breakpoint — resize horizontally to see it change.

breakpoint: —