@kiwicom/orbit-components/es/hooks/useBoundingRect/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import * as React from "react";

var useBoundingRect = function useBoundingRect(initialValue) {
  var _React$useState = React.useState(function () {
    return _objectSpread({
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    }, initialValue);
  }),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      state = _React$useState2[0],
      setState = _React$useState2[1];

  var ref = React.useRef(null);
  React.useEffect(function () {
    var calculate = function calculate() {
      if (ref && ref.current) {
        var dimensions = ref.current.getBoundingClientRect();
        /* $FlowFixMe
        Somehow the Flow is confused and returns type ClientRect instead of DOMRect and therefore it expects that it's a function.
        */

        setState(dimensions);
      }
    };

    calculate();
    window.addEventListener("resize", calculate);
    return function () {
      window.removeEventListener("resize", calculate);
    };
  }, []); // $FlowFixMe

  return [state, ref];
};

export default useBoundingRect;