@grail-ui/svelte/dist/resizeObserver/resizeObserver.js

[](https://www.npmjs.com/package/@grail-ui/svelte) [](https://bundlephobia.com/package/@grail-ui/svelte) [![minified + zipped](https:

import { isClient } from '../util/is.js';
import { toReadable, writableEffect } from '../util/store.js';
export const createResizeObserver = (config = {}) => {
    const isSupported = isClient && 'ResizeObserver' in window;
    const { handler, ...observerOptions } = config;
    const entries = writableEffect({}, handler);
    let uid = 0;
    const useResizeObserver = (node, _config = {}) => {
        let observer;
        const localId = `${uid++}`;
        const { handler: _handler, ..._observerOptions } = _config;
        if (isSupported) {
            observer = new ResizeObserver(([entry]) => {
                entries.update((_entries) => ({ ..._entries, [localId]: entry }));
                _handler?.(entry);
            });
            observer.observe(node, { ...observerOptions, ..._observerOptions });
        }
        return {
            destroy() {
                observer?.disconnect();
            },
        };
    };
    return {
        isSupported,
        entries: toReadable(entries),
        useResizeObserver,
    };
};