Resize Observer

Get notified for any alterations made to the dimensions of an Element.

# Anatomy

Using the code below, a ResizeObserver is created and can be used to report changes to the content or border box dimensions of an element.

<script>
	import { createResizeObserver } from '@grail-ui/svelte';

	const { useResizeObserver, entries } = createResizeObserver();

	$: console.log($entries[0]?.contentRect.width, $entries[0]?.contentRect.height);
</script>

<textarea use:useResizeObserver></textarea>

# API

# ResizeObserverConfig

Property	Description	Default
handler?	`(entries: Record) => void` Called every time a resize event occurs for any of the observed elements.	—
box?	`ResizeObserverBoxOptions` Sets which box model the observer will observe changes to. Possible values are `content-box` (the default), `border-box` and `device-pixel-content-box`.	'content-box'

# ResizeObserverUseConfig

Property	Description	Default
handler?	`(entry: ResizeObserverEntry) => void` Called every time a resize event occurs for the current observed element.	—
box?	`ResizeObserverBoxOptions` Sets which box model the observer will observe changes to. Possible values are `content-box` (the default), `border-box` and `device-pixel-content-box`.	'content-box'

# ResizeObserverReturn

Property	Description
isSupported	`boolean` Whether `ResizeObserver` is supported.
entries	`Readable<Record<string, ResizeObserverEntry>>` The resize data for all observed elements.
useResizeObserver	`(node: HTMLElement, config?: ResizeObserverUseConfig) => { destroy: VoidFunction }` Action for the element that needs to be observed.

Overview

Components