getElementSize
Category Elements
Tracks the size of an element using the Resize Observer API.
Demo
Resize the box to see changes
Usage
IMPORTANT
You can only use getElementSize in the component initialization lifecycle.
<script>
import { getElementSize } from '@sv-use/core';
let el = $state();
const size = getElementSize(() => el);
</script>
<textarea bind:this={el}></textarea>Type definitions
import { type ObserveResizeOptions } from '../../observers/observe-resize/index.svelte.js';
import type { MaybeGetter } from '../../__internal__/types.js';
export interface ElementSize {
width: number;
height: number;
}
interface GetElementSizeOptions extends Omit<ObserveResizeOptions, 'autoCleanup'> {
/**
* The initial size of the element.
* @default { width: 0, height: 0 }
*/
initialSize?: ElementSize;
}
type GetElementSizeReturn = {
readonly width: number;
readonly height: number;
};
/**
* Tracks the size of an element.
* @param element The element to track.
* @param options Additional options to customize the behavior.
* @see https://svelte-librarian.github.io/sv-use/docs/core/elements/get-element-size
*/
export declare function getElementSize(element: MaybeGetter<HTMLElement | undefined>, options?: GetElementSizeOptions): GetElementSizeReturn;
export {};