@netdata/netdata-ui/dist/es6/hooks/useMeasure/index.js

netdata UI kit

import { useLayoutEffect, useMemo, useState } from "react";
var defaultState = {
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  top: 0,
  left: 0,
  bottom: 0,
  right: 0
};
export default (function () {
  var _useState = useState(null),
    element = _useState[0],
    ref = _useState[1];
  var _useState2 = useState(defaultState),
    rect = _useState2[0],
    setRect = _useState2[1];
  var observer = useMemo(function () {
    return new window.ResizeObserver(function (entries) {
      if (entries[0]) {
        var _entries$0$contentRec = entries[0].contentRect,
          x = _entries$0$contentRec.x,
          y = _entries$0$contentRec.y,
          width = _entries$0$contentRec.width,
          height = _entries$0$contentRec.height,
          top = _entries$0$contentRec.top,
          left = _entries$0$contentRec.left,
          bottom = _entries$0$contentRec.bottom,
          right = _entries$0$contentRec.right;
        setRect({
          x: x,
          y: y,
          width: width,
          height: height,
          top: top,
          left: left,
          bottom: bottom,
          right: right
        });
      }
    });
  }, []);
  useLayoutEffect(function () {
    if (!element) return;
    observer.observe(element);
    return function () {
      observer.disconnect();
    };
  }, [element]);
  return [ref, rect];
});