@vue-widget/hooks/es/useSize/index.js

hooks from react to vue

import ResizeObserver from "resize-observer-polyfill";
import { getTargetElement } from "../utils/domTarget";
import { useState } from "../useState";
import { toRef, unref } from "vue";
import useEffectWithTarget from "../utils/useEffectWithTarget";
export function useSize(target) {
    var _target = toRef(target);
    var _a = useState(function () {
        var el = getTargetElement(unref(target));
        return el ? { width: el.clientWidth, height: el.clientHeight } : undefined;
    }), state = _a[0], setState = _a[1];
    useEffectWithTarget(function () {
        var el = getTargetElement(unref(target));
        if (!el) {
            return;
        }
        var resizeObserver = new ResizeObserver(function (entries) {
            entries.forEach(function (entry) {
                var _a = entry.target, clientWidth = _a.clientWidth, clientHeight = _a.clientHeight;
                setState({ width: clientWidth, height: clientHeight });
            });
        });
        resizeObserver.observe(el);
        return function () {
            resizeObserver.disconnect();
        };
    }, [], _target);
    return state;
}