@pantheon-systems/design-toolkit-react/dist/hooks/useMeasure.js

Pantheon's React Design Toolkit

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useRef, useState, useEffect } from 'react';
import ResizeObserver from 'resize-observer-polyfill';

function useMeasure() {
  var ref = useRef();
  var _useState = useState({
      left: 0,
      top: 0,
      width: 0,
      height: 0
    }),
    _useState2 = _slicedToArray(_useState, 2),
    bounds = _useState2[0],
    set = _useState2[1];
  var _useState3 = useState(function () {
      return new ResizeObserver(function (_ref) {
        var _ref2 = _slicedToArray(_ref, 1),
          entry = _ref2[0];
        return set(entry.contentRect);
      });
    }),
    _useState4 = _slicedToArray(_useState3, 1),
    ro = _useState4[0];
  useEffect(function () {
    ro.observe(ref.current);
    return function () {
      return ro.disconnect();
    };
  }, [ro]);
  return [{
    ref: ref
  }, bounds];
}

export { useMeasure as default };
//# sourceMappingURL=useMeasure.js.map