observeResize
Category Observers
Watch for changes to the dimensions of a given element's content or its border-box.
It can also watch multiple elements if given an array of elements.
Demo
Resize the box to see changes
Usage
<script>
import { observeResize } from '@sv-use/core';
let el = $state();
observeResize(() => el, (entries) => {
const { width, height } = entries[0].contentRect;
console.log(`New width : ${width} | New height : ${height}`);
});
</script>
<textarea bind:this={el} style="resize: both;"></textarea>Type definitions
import { type ConfigurableWindow } from '../../__internal__/configurable.js';
import type { CleanupFunction, MaybeGetter } from '../../__internal__/types.js';
type ResizeObserverSize = {
readonly inlineSize: number;
readonly blockSize: number;
};
type ResizeObserverEntry = {
readonly target: Element;
readonly contentRect: DOMRectReadOnly;
readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
};
type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;
export interface ObserveResizeOptions extends ConfigurableWindow {
/**
* Whether to automatically cleanup the observer or not.
*
* If set to `true`, it must run in the component initialization lifecycle.
* @default true
*/
autoCleanup?: boolean;
/**
* Sets which box model the observer will observe changes to. Possible values
* are `content-box` (the default), `border-box` and `device-pixel-content-box`.
*
* @default 'content-box'
*/
box?: ResizeObserverBoxOptions;
}
declare class ResizeObserver {
constructor(callback: ResizeObserverCallback);
disconnect(): void;
observe(target: Element, options?: ObserveResizeOptions): void;
unobserve(target: Element): void;
}
type ObserveResizeReturn = {
/** Whether the {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver | `Resize Observer API`} is supported or not. */
readonly isSupported: boolean;
/** A function to cleanup the observer. */
cleanup: CleanupFunction;
};
/**
* Watch for changes to the dimensions of a given element's content or its border-box.
* @param target The target to watch.
* @param callback The callback for when an element's dimensions changes.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/observers/observe-resize
*/
export declare function observeResize(target: MaybeGetter<HTMLElement | undefined>, callback: ResizeObserverCallback, options?: ObserveResizeOptions): ObserveResizeReturn;
/**
* Watch for changes to the dimensions of the given elements' content or their border-box.
* @param targets The targets to watch.
* @param callback The callback for when an element's dimensions changes.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/observers/observe-resize
*/
export declare function observeResize(targets: Array<MaybeGetter<HTMLElement | undefined>>, callback: ResizeObserverCallback, options?: ObserveResizeOptions): ObserveResizeReturn;
export {};