useResizeObserver

Demo

Usage

With a reference to an element, you can use the useResizeObserver utility to detect changes in the size of an element.

	<script lang="ts">
  import { useResizeObserver } from "runed";
 
  let el = $state<HTMLElement | null>(null);
  let text = $state("");
 
  useResizeObserver(
    () => el,
    (entries) => {
      const entry = entries[0];
      if (!entry) return;
 
      const { width, height } = entry.contentRect;
      text = `width: ${width};\nheight: ${height};`;
    }
  );
</script>
 
<textarea bind:this={el} readonly value={text}></textarea>

You can stop the resize observer at any point by calling the stop method.

	const { stop } = useResizeObserver(/* ... */);
stop();