use-element-dimensions/dist/esm/index.js

React Hook to figure out DOM Element dimensions with updates

import { useRef, useState, useCallback, useEffect, useLayoutEffect } from 'react';

var isServer = typeof window === "undefined";
var isSupported = !isServer && "ResizeObserver" in window;
var noop = function () { };
var noopObserver = { observe: noop, unobserve: noop };
var resizeObserver = !isSupported
    ? noopObserver
    : new ResizeObserver(function (entries) {
        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
            var entry = entries_1[_i];
            var target = entry.target;
            var boundingClient = target.getBoundingClientRect();
            var set = target.$$useElementDimensionsSet;
            if (set) {
                set(Object.assign(boundingClient, entry));
            }
        }
    });
var useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
// NOTE(danielkov): this is used to stub DOMRectReadonly on the server
var Rect = /** @class */ (function () {
    function Rect() {
        this.bottom = 0;
        this.height = 0;
        this.left = 0;
        this.right = 0;
        this.top = 0;
        this.width = 0;
        this.x = 0;
        this.y = 0;
    }
    Rect.prototype.toJSON = function () {
        return JSON.stringify(this);
    };
    return Rect;
}());
var contentRect = new Rect();
var domRect = new Rect();
var size = { inlineSize: 0, blockSize: 0 };
var defaultValue = Object.assign(domRect, {
    contentBoxSize: size,
    borderBoxSize: size,
    contentRect: contentRect,
    target: null,
});
var useDimensions = function () {
    var ref = useRef(null);
    var _a = useState(defaultValue), dimensions = _a[0], set = _a[1];
    var setRef = useCallback(function (element) {
        if (ref.current) {
            resizeObserver.unobserve(ref.current);
        }
        if (element instanceof Element) {
            element.$$useElementDimensionsSet = set;
            resizeObserver.observe(element);
        }
    }, []);
    useIsomorphicLayoutEffect(function () { return function () {
        if (ref.current) {
            resizeObserver.unobserve(ref.current);
        }
    }; }, []);
    return [dimensions, setRef];
};

export default useDimensions;