react-sizeme - npm Package Compare versions

Comparing version 2.6.10 to 2.6.11

dist/react-sizeme.js

@@ -5,3 +5,2 @@ 'use strict';
 
-var createResizeDetector = _interopDefault(require('element-resize-detector'));
 var React = require('react');
@@ -13,52 +12,88 @@ var React__default = _interopDefault(React);
 var throttleDebounce = require('throttle-debounce');
+var createResizeDetector = _interopDefault(require('element-resize-detector'));
 var isShallowEqual = _interopDefault(require('shallowequal'));
 
-var instances = {};
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
 
-// Lazily require to not cause bug
-// https://github.com/ctrlplusb/react-sizeme/issues/6
-function resizeDetector() {
-  var strategy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'scroll';
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
 
-  if (!instances[strategy]) {
-    instances[strategy] = createResizeDetector({
-      strategy: strategy
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
     });
+  } else {
+    obj[key] = value;
   }
 
-  return instances[strategy];
+  return obj;
 }
 
-var classCallCheck = function (instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-};
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var createClass = function () {
-  function defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-  }
 
-  return function (Constructor, protoProps, staticProps) {
-    if (protoProps) defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) defineProperties(Constructor, staticProps);
-    return Constructor;
+    return target;
   };
-}();
 
-var _extends = Object.assign || function (target) {
+  return _extends.apply(this, arguments);
+}
+
+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 _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
+    var source = arguments[i] != null ? arguments[i] : {};
 
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
+    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));
+      });
     }
@@ -68,7 +103,7 @@ }
   return target;
-};
+}
 
-var inherits = function (subClass, superClass) {
+function _inherits(subClass, superClass) {
   if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+    throw new TypeError("Super expression must either be null or a function");
   }
@@ -79,3 +114,2 @@
       value: subClass,
-      enumerable: false,
       writable: true,
@@ -85,29 +119,89 @@ configurable: true
   });
-  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
-};
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
 
-var objectWithoutProperties = function (obj, keys) {
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
   var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
 
-  for (var i in obj) {
-    if (keys.indexOf(i) >= 0) continue;
-    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
-    target[i] = obj[i];
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
   }
 
   return target;
-};
+}
 
-var possibleConstructorReturn = function (self, call) {
-  if (!self) {
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
 
-  return call && (typeof call === "object" || typeof call === "function") ? call : self;
-};
+  return self;
+}
 
-/* eslint-disable react/no-multi-comp */
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
 
+  return _assertThisInitialized(self);
+}
+
+var instances = {}; // Lazily require to not cause bug
+// https://github.com/ctrlplusb/react-sizeme/issues/6
+
+function resizeDetector() {
+  var strategy = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'scroll';
+
+  if (!instances[strategy]) {
+    instances[strategy] = createResizeDetector({
+      strategy: strategy
+    });
+  }
+
+  return instances[strategy];
+}
+
 var errMsg = 'react-sizeme: an error occurred whilst stopping to listen to node size changes';
-
 var defaultConfig = {
@@ -126,3 +220,2 @@ monitorWidth: true,
 }
-
 /**
@@ -134,12 +227,16 @@ * This is a utility wrapper component that will allow our higher order
 
-var ReferenceWrapper = function (_Component) {
-  inherits(ReferenceWrapper, _Component);
 
+var ReferenceWrapper =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(ReferenceWrapper, _Component);
+
   function ReferenceWrapper() {
-    classCallCheck(this, ReferenceWrapper);
-    return possibleConstructorReturn(this, (ReferenceWrapper.__proto__ || Object.getPrototypeOf(ReferenceWrapper)).apply(this, arguments));
+    _classCallCheck(this, ReferenceWrapper);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(ReferenceWrapper).apply(this, arguments));
   }
 
-  createClass(ReferenceWrapper, [{
-    key: 'render',
+  _createClass(ReferenceWrapper, [{
+    key: "render",
     value: function render() {
@@ -149,8 +246,11 @@ return React.Children.only(this.props.children);
   }]);
+
   return ReferenceWrapper;
 }(React.Component);
 
-ReferenceWrapper.displayName = 'SizeMeReferenceWrapper';
+_defineProperty(ReferenceWrapper, "displayName", 'SizeMeReferenceWrapper');
 
-ReferenceWrapper.propTypes = { children: PropTypes.element.isRequired };
+ReferenceWrapper.propTypes = {
+  children: PropTypes.element.isRequired
+};
 
@@ -160,10 +260,11 @@ function Placeholder(_ref) {
       style = _ref.style;
-
   // Lets create the props for the temp element.
-  var phProps = {};
+  var phProps = {}; // We will use any provided className/style or else make the temp
+  // container take the full available space.
 
-  // We will use any provided className/style or else make the temp
-  // container take the full available space.
   if (!className && !style) {
-    phProps.style = { width: '100%', height: '100%' };
+    phProps.style = {
+      width: '100%',
+      height: '100%'
+    };
   } else {
@@ -173,2 +274,3 @@ if (className) {
     }
+
     if (style) {
@@ -179,4 +281,5 @@ phProps.style = style;
 
-  return React__default.createElement('div', phProps);
+  return React__default.createElement("div", phProps);
 }
+
 Placeholder.displayName = 'SizeMePlaceholder';
@@ -186,11 +289,12 @@ Placeholder.propTypes = {
   style: PropTypes.object
+};
+/**
+ * As we need to maintain a ref on the root node that is rendered within our
+ * SizeMe component we need to wrap our entire render in a sub component.
+ * Without this, we lose the DOM ref after the placeholder is removed from
+ * the render and the actual component is rendered.
+ * It took me forever to figure this out, so tread extra careful on this one!
+ */
 
-  /**
-   * As we need to maintain a ref on the root node that is rendered within our
-   * SizeMe component we need to wrap our entire render in a sub component.
-   * Without this, we lose the DOM ref after the placeholder is removed from
-   * the render and the actual component is rendered.
-   * It took me forever to figure this out, so tread extra careful on this one!
-   */
-};var renderWrapper = function renderWrapper(WrappedComponent) {
+var renderWrapper = function renderWrapper(WrappedComponent) {
   function SizeMeRenderer(props) {
@@ -203,9 +307,6 @@ var explicitRef = props.explicitRef,
         onSize = props.onSize,
-        restProps = objectWithoutProperties(props, ['explicitRef', 'className', 'style', 'size', 'disablePlaceholder', 'onSize']);
+        restProps = _objectWithoutProperties(props, ["explicitRef", "className", "style", "size", "disablePlaceholder", "onSize"]);
 
-
     var noSizeData = size == null || size.width == null && size.height == null && size.position == null;
-
     var renderPlaceholder = noSizeData && !disablePlaceholder;
-
     var renderProps = {
@@ -220,20 +321,22 @@ className: className,
 
-    var toRender = renderPlaceholder ? React__default.createElement(Placeholder, { className: className, style: style }) : React__default.createElement(WrappedComponent, _extends({}, renderProps, restProps));
-
-    return React__default.createElement(
-      ReferenceWrapper,
-      { ref: explicitRef },
-      toRender
-    );
+    var toRender = renderPlaceholder ? React__default.createElement(Placeholder, {
+      className: className,
+      style: style
+    }) : React__default.createElement(WrappedComponent, _extends({}, renderProps, restProps));
+    return React__default.createElement(ReferenceWrapper, {
+      ref: explicitRef
+    }, toRender);
   }
 
-  SizeMeRenderer.displayName = 'SizeMeRenderer(' + getDisplayName(WrappedComponent) + ')';
-
+  SizeMeRenderer.displayName = "SizeMeRenderer(".concat(getDisplayName(WrappedComponent), ")");
   SizeMeRenderer.propTypes = {
     explicitRef: PropTypes.func.isRequired,
     className: PropTypes.string,
-    style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+    style: PropTypes.object,
+    // eslint-disable-line react/forbid-prop-types
     size: PropTypes.shape({
-      width: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
-      height: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
+      width: PropTypes.number,
+      // eslint-disable-line react/no-unused-prop-types
+      height: PropTypes.number,
+      // eslint-disable-line react/no-unused-prop-types
       position: PropTypes.object
@@ -244,6 +347,4 @@ }),
   };
-
   return SizeMeRenderer;
 };
-
 /**
@@ -264,53 +365,57 @@ * :: config -> Component -> WrappedComponent
  */
+
+
 function withSize() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig;
   var _config$monitorWidth = config.monitorWidth,
-      monitorWidth = _config$monitorWidth === undefined ? defaultConfig.monitorWidth : _config$monitorWidth,
+      monitorWidth = _config$monitorWidth === void 0 ? defaultConfig.monitorWidth : _config$monitorWidth,
       _config$monitorHeight = config.monitorHeight,
-      monitorHeight = _config$monitorHeight === undefined ? defaultConfig.monitorHeight : _config$monitorHeight,
+      monitorHeight = _config$monitorHeight === void 0 ? defaultConfig.monitorHeight : _config$monitorHeight,
       _config$monitorPositi = config.monitorPosition,
-      monitorPosition = _config$monitorPositi === undefined ? defaultConfig.monitorPosition : _config$monitorPositi,
+      monitorPosition = _config$monitorPositi === void 0 ? defaultConfig.monitorPosition : _config$monitorPositi,
       _config$refreshRate = config.refreshRate,
-      refreshRate = _config$refreshRate === undefined ? defaultConfig.refreshRate : _config$refreshRate,
+      refreshRate = _config$refreshRate === void 0 ? defaultConfig.refreshRate : _config$refreshRate,
       _config$refreshMode = config.refreshMode,
-      refreshMode = _config$refreshMode === undefined ? defaultConfig.refreshMode : _config$refreshMode,
+      refreshMode = _config$refreshMode === void 0 ? defaultConfig.refreshMode : _config$refreshMode,
       _config$noPlaceholder = config.noPlaceholder,
-      noPlaceholder = _config$noPlaceholder === undefined ? defaultConfig.noPlaceholder : _config$noPlaceholder,
+      noPlaceholder = _config$noPlaceholder === void 0 ? defaultConfig.noPlaceholder : _config$noPlaceholder,
       _config$resizeDetecto = config.resizeDetectorStrategy,
-      resizeDetectorStrategy = _config$resizeDetecto === undefined ? defaultConfig.resizeDetectorStrategy : _config$resizeDetecto;
-
-
+      resizeDetectorStrategy = _config$resizeDetecto === void 0 ? defaultConfig.resizeDetectorStrategy : _config$resizeDetecto;
   invariant(monitorWidth || monitorHeight || monitorPosition, 'You have to monitor at least one of the width, height, or position when using "sizeMe"');
-
   invariant(refreshRate >= 16, "It is highly recommended that you don't put your refreshRate lower than " + '16 as this may cause layout thrashing.');
-
   invariant(refreshMode === 'throttle' || refreshMode === 'debounce', 'The refreshMode should have a value of "throttle" or "debounce"');
-
   var refreshDelayStrategy = refreshMode === 'throttle' ? throttleDebounce.throttle : throttleDebounce.debounce;
-
   return function WrapComponent(WrappedComponent) {
     var SizeMeRenderWrapper = renderWrapper(WrappedComponent);
 
-    var SizeAwareComponent = function (_React$Component) {
-      inherits(SizeAwareComponent, _React$Component);
+    var SizeAwareComponent =
+    /*#__PURE__*/
+    function (_React$Component) {
+      _inherits(SizeAwareComponent, _React$Component);
 
       function SizeAwareComponent() {
-        var _ref2;
+        var _getPrototypeOf2;
 
-        var _temp, _this2, _ret;
+        var _this;
 
-        classCallCheck(this, SizeAwareComponent);
+        _classCallCheck(this, SizeAwareComponent);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this2 = possibleConstructorReturn(this, (_ref2 = SizeAwareComponent.__proto__ || Object.getPrototypeOf(SizeAwareComponent)).call.apply(_ref2, [this].concat(args))), _this2), _this2.domEl = null, _this2.state = {
+        _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SizeAwareComponent)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+        _defineProperty(_assertThisInitialized(_this), "domEl", null);
+
+        _defineProperty(_assertThisInitialized(_this), "state", {
           width: undefined,
           height: undefined,
           position: undefined
-        }, _this2.uninstall = function () {
-          if (_this2.domEl) {
+        });
+
+        _defineProperty(_assertThisInitialized(_this), "uninstall", function () {
+          if (_this.domEl) {
             try {
-              _this2.detector.uninstall(_this2.domEl);
+              _this.detector.uninstall(_this.domEl);
             } catch (err) {
@@ -320,24 +425,38 @@ // eslint-disable-next-line no-console
             }
-            _this2.domEl = null;
+
+            _this.domEl = null;
           }
-        }, _this2.determineStrategy = function (props) {
+        });
+
+        _defineProperty(_assertThisInitialized(_this), "determineStrategy", function (props) {
           if (props.onSize) {
-            if (!_this2.callbackState) {
-              _this2.callbackState = _extends({}, _this2.state);
+            if (!_this.callbackState) {
+              _this.callbackState = _objectSpread2({}, _this.state);
             }
-            _this2.strategy = 'callback';
+
+            _this.strategy = 'callback';
           } else {
-            _this2.strategy = 'render';
+            _this.strategy = 'render';
           }
-        }, _this2.strategisedSetState = function (state) {
-          if (_this2.strategy === 'callback') {
-            _this2.callbackState = state;
-            _this2.props.onSize(state);
+        });
+
+        _defineProperty(_assertThisInitialized(_this), "strategisedSetState", function (state) {
+          if (_this.strategy === 'callback') {
+            _this.callbackState = state;
+
+            _this.props.onSize(state);
           }
-          _this2.setState(state);
-        }, _this2.strategisedGetState = function () {
-          return _this2.strategy === 'callback' ? _this2.callbackState : _this2.state;
-        }, _this2.refCallback = function (element) {
-          _this2.element = element;
-        }, _this2.hasSizeChanged = function (current, next) {
+
+          _this.setState(state);
+        });
+
+        _defineProperty(_assertThisInitialized(_this), "strategisedGetState", function () {
+          return _this.strategy === 'callback' ? _this.callbackState : _this.state;
+        });
+
+        _defineProperty(_assertThisInitialized(_this), "refCallback", function (element) {
+          _this.element = element;
+        });
+
+        _defineProperty(_assertThisInitialized(_this), "hasSizeChanged", function (current, next) {
           var c = current;
@@ -347,5 +466,6 @@ var n = next;
           var np = n.position || {};
+          return monitorWidth && c.width !== n.width || monitorHeight && c.height !== n.height || monitorPosition && (cp.top !== np.top || cp.left !== np.left || cp.bottom !== np.bottom || cp.right !== np.right);
+        });
 
-          return monitorWidth && c.width !== n.width || monitorHeight && c.height !== n.height || monitorPosition && (cp.top !== np.top || cp.left !== np.left || cp.bottom !== np.bottom || cp.right !== np.right);
-        }, _this2.checkIfSizeChanged = refreshDelayStrategy(refreshRate, function (el) {
+        _defineProperty(_assertThisInitialized(_this), "checkIfSizeChanged", refreshDelayStrategy(refreshRate, function (el) {
           var _el$getBoundingClient = el.getBoundingClientRect(),
@@ -362,13 +482,20 @@ width = _el$getBoundingClient.width,
             height: monitorHeight ? height : null,
-            position: monitorPosition ? { right: right, left: left, top: top, bottom: bottom } : null
+            position: monitorPosition ? {
+              right: right,
+              left: left,
+              top: top,
+              bottom: bottom
+            } : null
           };
 
-          if (_this2.hasSizeChanged(_this2.strategisedGetState(), next)) {
-            _this2.strategisedSetState(next);
+          if (_this.hasSizeChanged(_this.strategisedGetState(), next)) {
+            _this.strategisedSetState(next);
           }
-        }), _temp), possibleConstructorReturn(_this2, _ret);
+        }));
+
+        return _this;
       }
 
-      createClass(SizeAwareComponent, [{
-        key: 'componentDidMount',
+      _createClass(SizeAwareComponent, [{
+        key: "componentDidMount",
         value: function componentDidMount() {
@@ -380,3 +507,3 @@ this.detector = resizeDetector(resizeDetectorStrategy);
       }, {
-        key: 'componentDidUpdate',
+        key: "componentDidUpdate",
         value: function componentDidUpdate() {
@@ -387,3 +514,3 @@ this.determineStrategy(this.props);
       }, {
-        key: 'componentWillUnmount',
+        key: "componentWillUnmount",
         value: function componentWillUnmount() {
@@ -395,9 +522,11 @@ // Change our size checker to a noop just in case we have some
           };
+
           this.checkIfSizeChanged = function () {
             return undefined;
           };
+
           this.uninstall();
         }
       }, {
-        key: 'handleDOMNode',
+        key: "handleDOMNode",
         value: function handleDOMNode() {
@@ -423,7 +552,7 @@ var found = this.element && ReactDOM.findDOMNode(this.element);
       }, {
-        key: 'render',
+        key: "render",
         value: function render() {
           var disablePlaceholder = withSize.enableSSRBehaviour || withSize.noPlaceholders || noPlaceholder || this.strategy === 'callback';
 
-          var size = _extends({}, this.state);
+          var size = _objectSpread2({}, this.state);
 
@@ -437,17 +566,16 @@ return React__default.createElement(SizeMeRenderWrapper, _extends({
       }]);
+
       return SizeAwareComponent;
     }(React__default.Component);
 
-    SizeAwareComponent.displayName = 'SizeMe(' + getDisplayName(WrappedComponent) + ')';
-    SizeAwareComponent.propTypes = {
+    _defineProperty(SizeAwareComponent, "displayName", "SizeMe(".concat(getDisplayName(WrappedComponent), ")"));
+
+    _defineProperty(SizeAwareComponent, "propTypes", {
       onSize: PropTypes.func
-    };
+    });
 
-
     SizeAwareComponent.WrappedComponent = WrappedComponent;
-
     return SizeAwareComponent;
   };
 }
-
 /**
@@ -463,4 +591,5 @@ * Allow SizeMe to run within SSR environments.  This is a "global" behaviour
  */
+
+
 withSize.enableSSRBehaviour = false;
-
 /**
@@ -470,19 +599,36 @@ * Global configuration allowing to disable placeholder rendering for all
  */
+
 withSize.noPlaceholders = false;
 
-var SizeMe = function (_Component) {
-  inherits(SizeMe, _Component);
+var SizeMe =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(SizeMe, _Component);
 
   function SizeMe(props) {
-    classCallCheck(this, SizeMe);
+    var _this;
 
-    var _this = possibleConstructorReturn(this, (SizeMe.__proto__ || Object.getPrototypeOf(SizeMe)).call(this, props));
+    _classCallCheck(this, SizeMe);
 
-    _initialiseProps.call(_this);
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(SizeMe).call(this, props));
 
-    var children = props.children,
+    _defineProperty(_assertThisInitialized(_this), "createComponent", function (config) {
+      _this.SizeAware = withSize(config)(function (_ref) {
+        var children = _ref.children;
+        return children;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSize", function (size) {
+      return _this.setState({
+        size: size
+      });
+    });
+
+    var _children = props.children,
         render = props.render,
-        sizeMeConfig = objectWithoutProperties(props, ['children', 'render']);
+        sizeMeConfig = _objectWithoutProperties(props, ["children", "render"]);
 
     _this.createComponent(sizeMeConfig);
+
     _this.state = {
@@ -497,12 +643,13 @@ size: {
 
-  createClass(SizeMe, [{
-    key: 'componentDidUpdate',
+  _createClass(SizeMe, [{
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _props = this.props,
-          prevChildren = _props.children,
-          prevRender = _props.render,
-          currentSizeMeConfig = objectWithoutProperties(_props, ['children', 'render']);
+      var _this$props = this.props,
+          prevChildren = _this$props.children,
+          prevRender = _this$props.render,
+          currentSizeMeConfig = _objectWithoutProperties(_this$props, ["children", "render"]);
+
       var nextChildren = prevProps.children,
           nextRender = prevProps.render,
-          prevSizeMeConfig = objectWithoutProperties(prevProps, ['children', 'render']);
+          prevSizeMeConfig = _objectWithoutProperties(prevProps, ["children", "render"]);
 
@@ -514,41 +661,27 @@ if (!isShallowEqual(currentSizeMeConfig, prevSizeMeConfig)) {
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var SizeAware = this.SizeAware;
-
       var render = this.props.children || this.props.render;
-      return React__default.createElement(
-        SizeAware,
-        { onSize: this.onSize },
-        render({ size: this.state.size })
-      );
+      return React__default.createElement(SizeAware, {
+        onSize: this.onSize
+      }, render({
+        size: this.state.size
+      }));
     }
   }]);
+
   return SizeMe;
 }(React.Component);
 
-SizeMe.propTypes = {
+_defineProperty(SizeMe, "propTypes", {
   children: PropTypes.func,
   render: PropTypes.func
-};
-SizeMe.defaultProps = {
+});
+
+_defineProperty(SizeMe, "defaultProps", {
   children: undefined,
   render: undefined
-};
+});
 
-var _initialiseProps = function _initialiseProps() {
-  var _this2 = this;
-
-  this.createComponent = function (config) {
-    _this2.SizeAware = withSize(config)(function (_ref) {
-      var children = _ref.children;
-      return children;
-    });
-  };
-
-  this.onSize = function (size) {
-    return _this2.setState({ size: size });
-  };
-};
-
 withSize.SizeMe = SizeMe;
@@ -555,0 +688,0 @@ withSize.withSize = withSize;

dist/react-sizeme.min.js

@@ -1,2 +0,2 @@
-"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var createResizeDetector=_interopDefault(require("element-resize-detector")),React=require("react"),React__default=_interopDefault(React),PropTypes=_interopDefault(require("prop-types")),ReactDOM=_interopDefault(require("react-dom")),invariant=_interopDefault(require("invariant")),throttleDebounce=require("throttle-debounce"),isShallowEqual=_interopDefault(require("shallowequal")),instances={};function resizeDetector(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"scroll";return instances[e]||(instances[e]=createResizeDetector({strategy:e})),instances[e]}var classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function i(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,r){return t&&i(e.prototype,t),r&&i(e,r),e}}(),_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e},inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},objectWithoutProperties=function(e,t){var r={};for(var i in e)0<=t.indexOf(i)||Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i]);return r},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},errMsg="react-sizeme: an error occurred whilst stopping to listen to node size changes",defaultConfig={monitorWidth:!0,monitorHeight:!1,monitorPosition:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(e){function t(){return classCallCheck(this,t),possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return inherits(t,e),createClass(t,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),t}(React.Component);function Placeholder(e){var t=e.className,r=e.style,i={};return t||r?(t&&(i.className=t),r&&(i.style=r)):i.style={width:"100%",height:"100%"},React__default.createElement("div",i)}ReferenceWrapper.displayName="SizeMeReferenceWrapper",ReferenceWrapper.propTypes={children:PropTypes.element.isRequired},Placeholder.displayName="SizeMePlaceholder",Placeholder.propTypes={className:PropTypes.string,style:PropTypes.object};var renderWrapper=function(h){function e(e){var t=e.explicitRef,r=e.className,i=e.style,o=e.size,n=e.disablePlaceholder,a=(e.onSize,objectWithoutProperties(e,["explicitRef","className","style","size","disablePlaceholder","onSize"])),s=(null==o||null==o.width&&null==o.height&&null==o.position)&&!n,l={className:r,style:i};null!=o&&(l.size=o);var c=s?React__default.createElement(Placeholder,{className:r,style:i}):React__default.createElement(h,_extends({},l,a));return React__default.createElement(ReferenceWrapper,{ref:t},c)}return e.displayName="SizeMeRenderer("+getDisplayName(h)+")",e.propTypes={explicitRef:PropTypes.func.isRequired,className:PropTypes.string,style:PropTypes.object,size:PropTypes.shape({width:PropTypes.number,height:PropTypes.number,position:PropTypes.object}),disablePlaceholder:PropTypes.bool,onSize:PropTypes.func},e};function withSize(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,h=void 0===t?defaultConfig.monitorWidth:t,r=e.monitorHeight,u=void 0===r?defaultConfig.monitorHeight:r,i=e.monitorPosition,p=void 0===i?defaultConfig.monitorPosition:i,o=e.refreshRate,a=void 0===o?defaultConfig.refreshRate:o,n=e.refreshMode,s=void 0===n?defaultConfig.refreshMode:n,l=e.noPlaceholder,c=void 0===l?defaultConfig.noPlaceholder:l,d=e.resizeDetectorStrategy,f=void 0===d?defaultConfig.resizeDetectorStrategy:d;invariant(h||u||p,'You have to monitor at least one of the width, height, or position when using "sizeMe"'),invariant(16<=a,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant("throttle"===s||"debounce"===s,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===s?throttleDebounce.throttle:throttleDebounce.debounce;return function(e){var r=renderWrapper(e),t=function(e){function n(){var e,t,c;classCallCheck(this,n);for(var r=arguments.length,i=Array(r),o=0;o<r;o++)i[o]=arguments[o];return(t=c=possibleConstructorReturn(this,(e=n.__proto__||Object.getPrototypeOf(n)).call.apply(e,[this].concat(i)))).domEl=null,c.state={width:void 0,height:void 0,position:void 0},c.uninstall=function(){if(c.domEl){try{c.detector.uninstall(c.domEl)}catch(e){console.warn(errMsg)}c.domEl=null}},c.determineStrategy=function(e){e.onSize?(c.callbackState||(c.callbackState=_extends({},c.state)),c.strategy="callback"):c.strategy="render"},c.strategisedSetState=function(e){"callback"===c.strategy&&(c.callbackState=e,c.props.onSize(e)),c.setState(e)},c.strategisedGetState=function(){return"callback"===c.strategy?c.callbackState:c.state},c.refCallback=function(e){c.element=e},c.hasSizeChanged=function(e,t){var r=e,i=t,o=r.position||{},n=i.position||{};return h&&r.width!==i.width||u&&r.height!==i.height||p&&(o.top!==n.top||o.left!==n.left||o.bottom!==n.bottom||o.right!==n.right)},c.checkIfSizeChanged=y(a,function(e){var t=e.getBoundingClientRect(),r=t.width,i=t.height,o=t.right,n=t.left,a=t.top,s=t.bottom,l={width:h?r:null,height:u?i:null,position:p?{right:o,left:n,top:a,bottom:s}:null};c.hasSizeChanged(c.strategisedGetState(),l)&&c.strategisedSetState(l)}),possibleConstructorReturn(c,t)}return inherits(n,e),createClass(n,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(f),this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.uninstall()}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM.findDOMNode(this.element);e?this.domEl?(this.domEl.isSameNode&&!this.domEl.isSameNode(e)||this.domEl!==e)&&(this.uninstall(),this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):(this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):this.uninstall()}},{key:"render",value:function(){var e=withSize.enableSSRBehaviour||withSize.noPlaceholders||c||"callback"===this.strategy,t=_extends({},this.state);return React__default.createElement(r,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:t,disablePlaceholder:e},this.props))}}]),n}(React__default.Component);return t.displayName="SizeMe("+getDisplayName(e)+")",t.propTypes={onSize:PropTypes.func},t.WrappedComponent=e,t}}withSize.enableSSRBehaviour=!1,withSize.noPlaceholders=!1;var SizeMe=function(e){function i(e){classCallCheck(this,i);var t=possibleConstructorReturn(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,e));_initialiseProps.call(t);e.children,e.render;var r=objectWithoutProperties(e,["children","render"]);return t.createComponent(r),t.state={size:{width:void 0,height:void 0}},t}return inherits(i,e),createClass(i,[{key:"componentDidUpdate",value:function(e){var t=this.props,r=(t.children,t.render,objectWithoutProperties(t,["children","render"])),i=(e.children,e.render,objectWithoutProperties(e,["children","render"]));isShallowEqual(r,i)||this.createComponent(r)}},{key:"render",value:function(){var e=this.SizeAware,t=this.props.children||this.props.render;return React__default.createElement(e,{onSize:this.onSize},t({size:this.state.size}))}}]),i}(React.Component);SizeMe.propTypes={children:PropTypes.func,render:PropTypes.func},SizeMe.defaultProps={children:void 0,render:void 0};var _initialiseProps=function(){var t=this;this.createComponent=function(e){t.SizeAware=withSize(e)(function(e){return e.children})},this.onSize=function(e){return t.setState({size:e})}};withSize.SizeMe=SizeMe,withSize.withSize=withSize,module.exports=withSize;
+"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var React=require("react"),React__default=_interopDefault(React),PropTypes=_interopDefault(require("prop-types")),ReactDOM=_interopDefault(require("react-dom")),invariant=_interopDefault(require("invariant")),throttleDebounce=require("throttle-debounce"),createResizeDetector=_interopDefault(require("element-resize-detector")),isShallowEqual=_interopDefault(require("shallowequal"));function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var r=0;r<t.length;r++){var i=t[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,t,r){return t&&_defineProperties(e.prototype,t),r&&_defineProperties(e,r),e}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _extends(){return(_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e}).apply(this,arguments)}function ownKeys(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,i)}return r}function _objectSpread2(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?ownKeys(Object(r),!0).forEach(function(e){_defineProperty(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&_setPrototypeOf(e,t)}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function _objectWithoutPropertiesLoose(e,t){if(null==e)return{};var r,i,n={},o=Object.keys(e);for(i=0;i<o.length;i++)r=o[i],0<=t.indexOf(r)||(n[r]=e[r]);return n}function _objectWithoutProperties(e,t){if(null==e)return{};var r,i,n=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)r=o[i],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _possibleConstructorReturn(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?_assertThisInitialized(e):t}var instances={};function resizeDetector(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"scroll";return instances[e]||(instances[e]=createResizeDetector({strategy:e})),instances[e]}var errMsg="react-sizeme: an error occurred whilst stopping to listen to node size changes",defaultConfig={monitorWidth:!0,monitorHeight:!1,monitorPosition:!1,refreshRate:16,refreshMode:"throttle",noPlaceholder:!1,resizeDetectorStrategy:"scroll"};function getDisplayName(e){return e.displayName||e.name||"Component"}var ReferenceWrapper=function(){function e(){return _classCallCheck(this,e),_possibleConstructorReturn(this,_getPrototypeOf(e).apply(this,arguments))}return _inherits(e,React.Component),_createClass(e,[{key:"render",value:function(){return React.Children.only(this.props.children)}}]),e}();function Placeholder(e){var t=e.className,r=e.style,i={};return t||r?(t&&(i.className=t),r&&(i.style=r)):i.style={width:"100%",height:"100%"},React__default.createElement("div",i)}_defineProperty(ReferenceWrapper,"displayName","SizeMeReferenceWrapper"),ReferenceWrapper.propTypes={children:PropTypes.element.isRequired},Placeholder.displayName="SizeMePlaceholder",Placeholder.propTypes={className:PropTypes.string,style:PropTypes.object};var renderWrapper=function(h){function e(e){var t=e.explicitRef,r=e.className,i=e.style,n=e.size,o=e.disablePlaceholder,a=(e.onSize,_objectWithoutProperties(e,["explicitRef","className","style","size","disablePlaceholder","onSize"])),s=(null==n||null==n.width&&null==n.height&&null==n.position)&&!o,l={className:r,style:i};null!=n&&(l.size=n);var c=s?React__default.createElement(Placeholder,{className:r,style:i}):React__default.createElement(h,_extends({},l,a));return React__default.createElement(ReferenceWrapper,{ref:t},c)}return e.displayName="SizeMeRenderer(".concat(getDisplayName(h),")"),e.propTypes={explicitRef:PropTypes.func.isRequired,className:PropTypes.string,style:PropTypes.object,size:PropTypes.shape({width:PropTypes.number,height:PropTypes.number,position:PropTypes.object}),disablePlaceholder:PropTypes.bool,onSize:PropTypes.func},e};function withSize(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:defaultConfig,t=e.monitorWidth,h=void 0===t?defaultConfig.monitorWidth:t,r=e.monitorHeight,p=void 0===r?defaultConfig.monitorHeight:r,i=e.monitorPosition,u=void 0===i?defaultConfig.monitorPosition:i,n=e.refreshRate,o=void 0===n?defaultConfig.refreshRate:n,a=e.refreshMode,s=void 0===a?defaultConfig.refreshMode:a,l=e.noPlaceholder,c=void 0===l?defaultConfig.noPlaceholder:l,d=e.resizeDetectorStrategy,f=void 0===d?defaultConfig.resizeDetectorStrategy:d;invariant(h||p||u,'You have to monitor at least one of the width, height, or position when using "sizeMe"'),invariant(16<=o,"It is highly recommended that you don't put your refreshRate lower than 16 as this may cause layout thrashing."),invariant("throttle"===s||"debounce"===s,'The refreshMode should have a value of "throttle" or "debounce"');var y="throttle"===s?throttleDebounce.throttle:throttleDebounce.debounce;return function(e){var r=renderWrapper(e),t=function(){function n(){var e,c;_classCallCheck(this,n);for(var t=arguments.length,r=new Array(t),i=0;i<t;i++)r[i]=arguments[i];return _defineProperty(_assertThisInitialized(c=_possibleConstructorReturn(this,(e=_getPrototypeOf(n)).call.apply(e,[this].concat(r)))),"domEl",null),_defineProperty(_assertThisInitialized(c),"state",{width:void 0,height:void 0,position:void 0}),_defineProperty(_assertThisInitialized(c),"uninstall",function(){if(c.domEl){try{c.detector.uninstall(c.domEl)}catch(e){console.warn(errMsg)}c.domEl=null}}),_defineProperty(_assertThisInitialized(c),"determineStrategy",function(e){e.onSize?(c.callbackState||(c.callbackState=_objectSpread2({},c.state)),c.strategy="callback"):c.strategy="render"}),_defineProperty(_assertThisInitialized(c),"strategisedSetState",function(e){"callback"===c.strategy&&(c.callbackState=e,c.props.onSize(e)),c.setState(e)}),_defineProperty(_assertThisInitialized(c),"strategisedGetState",function(){return"callback"===c.strategy?c.callbackState:c.state}),_defineProperty(_assertThisInitialized(c),"refCallback",function(e){c.element=e}),_defineProperty(_assertThisInitialized(c),"hasSizeChanged",function(e,t){var r=e.position||{},i=t.position||{};return h&&e.width!==t.width||p&&e.height!==t.height||u&&(r.top!==i.top||r.left!==i.left||r.bottom!==i.bottom||r.right!==i.right)}),_defineProperty(_assertThisInitialized(c),"checkIfSizeChanged",y(o,function(e){var t=e.getBoundingClientRect(),r=t.width,i=t.height,n=t.right,o=t.left,a=t.top,s=t.bottom,l={width:h?r:null,height:p?i:null,position:u?{right:n,left:o,top:a,bottom:s}:null};c.hasSizeChanged(c.strategisedGetState(),l)&&c.strategisedSetState(l)})),c}return _inherits(n,React__default.Component),_createClass(n,[{key:"componentDidMount",value:function(){this.detector=resizeDetector(f),this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentDidUpdate",value:function(){this.determineStrategy(this.props),this.handleDOMNode()}},{key:"componentWillUnmount",value:function(){this.hasSizeChanged=function(){},this.checkIfSizeChanged=function(){},this.uninstall()}},{key:"handleDOMNode",value:function(){var e=this.element&&ReactDOM.findDOMNode(this.element);e?this.domEl?(this.domEl.isSameNode&&!this.domEl.isSameNode(e)||this.domEl!==e)&&(this.uninstall(),this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):(this.domEl=e,this.detector.listenTo(this.domEl,this.checkIfSizeChanged)):this.uninstall()}},{key:"render",value:function(){var e=withSize.enableSSRBehaviour||withSize.noPlaceholders||c||"callback"===this.strategy,t=_objectSpread2({},this.state);return React__default.createElement(r,_extends({explicitRef:this.refCallback,size:"callback"===this.strategy?null:t,disablePlaceholder:e},this.props))}}]),n}();return _defineProperty(t,"displayName","SizeMe(".concat(getDisplayName(e),")")),_defineProperty(t,"propTypes",{onSize:PropTypes.func}),t.WrappedComponent=e,t}}withSize.enableSSRBehaviour=!1,withSize.noPlaceholders=!1;var SizeMe=function(){function i(e){var t;_classCallCheck(this,i),_defineProperty(_assertThisInitialized(t=_possibleConstructorReturn(this,_getPrototypeOf(i).call(this,e))),"createComponent",function(e){t.SizeAware=withSize(e)(function(e){return e.children})}),_defineProperty(_assertThisInitialized(t),"onSize",function(e){return t.setState({size:e})});e.children,e.render;var r=_objectWithoutProperties(e,["children","render"]);return t.createComponent(r),t.state={size:{width:void 0,height:void 0}},t}return _inherits(i,React.Component),_createClass(i,[{key:"componentDidUpdate",value:function(e){var t=this.props,r=(t.children,t.render,_objectWithoutProperties(t,["children","render"])),i=(e.children,e.render,_objectWithoutProperties(e,["children","render"]));isShallowEqual(r,i)||this.createComponent(r)}},{key:"render",value:function(){var e=this.SizeAware,t=this.props.children||this.props.render;return React__default.createElement(e,{onSize:this.onSize},t({size:this.state.size}))}}]),i}();_defineProperty(SizeMe,"propTypes",{children:PropTypes.func,render:PropTypes.func}),_defineProperty(SizeMe,"defaultProps",{children:void 0,render:void 0}),withSize.SizeMe=SizeMe,withSize.withSize=withSize,module.exports=withSize;
 //# sourceMappingURL=react-sizeme.min.js.map

package.json

 {
   "name": "react-sizeme",
-  "version": "2.6.10",
+  "version": "2.6.11",
   "description": "Make your React Components aware of their width and/or height!",
@@ -28,14 +28,14 @@ "license": "MIT",
     "lint": "eslint src",
-    "precommit": "lint-staged && npm run test",
-    "prepublish": "npm run build",
+    "prepublish": "yarn run build",
     "test": "jest",
-    "test:coverage": "npm run test -- --coverage",
-    "test:coverage:deploy": "npm run test:coverage && codecov"
+    "test:coverage": "yarn run test -- --coverage",
+    "test:coverage:deploy": "yarn run test:coverage && codecov"
   },
   "resolutions": {
-    "@types/react": "16.9.5"
+    "@types/react": "16.9.17"
   },
   "dependencies": {
-    "element-resize-detector": "^1.1.15",
+    "element-resize-detector": "^1.1.16",
     "invariant": "^2.2.4",
+    "prop-types": "^15.7.2",
     "shallowequal": "^1.1.0",
@@ -45,3 +45,2 @@ "throttle-debounce": "^2.1.0"
   "peerDependencies": {
-    "prop-types": "^15.0.0-0",
     "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0",
@@ -51,48 +50,45 @@ "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0"
   "devDependencies": {
-    "@types/react": "^16.9.5",
-    "@types/react-dom": "^16.9.1",
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/polyfill": "^7.8.3",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/register": "^7.8.3",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4",
     "app-root-dir": "1.0.2",
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
     "babel-eslint": "10.0.3",
-    "babel-jest": "^23.0.1",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "6.24.1",
-    "babel-preset-stage-3": "6.24.1",
-    "babel-register": "^6.26.0",
-    "change-case": "^3.0.2",
+    "babel-jest": "^24.9.0",
     "codecov": "^3.6.1",
     "cross-env": "^6.0.3",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
-    "enzyme-to-json": "^3.4.2",
-    "eslint": "^6.5.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.3",
+    "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-plugin-import": "^2.18.2",
+    "eslint-config-prettier": "^6.9.0",
+    "eslint-plugin-import": "^2.20.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^2.1.2",
-    "gzip-size": "^4.0.0",
-    "husky": "^0.14.3",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "gzip-size": "^5.1.1",
+    "husky": "^4.0.7",
     "in-publish": "2.0.0",
-    "jest": "^23.1.0",
-    "lint-staged": "^7.2.0",
-    "prettier": "^1.18.2",
+    "jest": "^24.9.0",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.19.1",
     "pretty-bytes": "5.3.0",
-    "prop-types": "^15.5.10",
     "ramda": "^0.26.1",
-    "react": "^16.10.2",
+    "react": "^16.12.0",
     "react-addons-test-utils": "^15.6.0",
-    "react-dom": "^16.10.2",
-    "react-test-renderer": "^16.10.2",
+    "react-dom": "^16.12.0",
+    "react-test-renderer": "^16.12.0",
     "readline-sync": "1.4.10",
     "rimraf": "^3.0.0",
-    "rollup": "^0.60.7",
-    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-uglify": "^4.0.0",
-    "typescript": "^3.6.4",
+    "rollup": "^1.29.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-uglify": "^6.0.4",
+    "title-case": "^3.0.2",
+    "typescript": "^3.7.4",
     "typings-tester": "^0.3.2"
@@ -108,3 +104,4 @@ },
     "testPathIgnorePatterns": [
-      "<rootDir>/(coverage|dist|node_modules|tools)/"
+      "<rootDir>/(coverage|dist|node_modules|tools)/",
+      "<rootDir>/src/__tests__/typescript/"
     ],
@@ -163,3 +160,8 @@ "testURL": "http://localhost/"
     ]
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged && yarn run test"
+    }
   }
 }

README.md

@@ -65,2 +65,3 @@ <p>&nbsp;</p>
 - [Extreme Appreciation](https://github.com/ctrlplusb/react-sizeme#extreme-appreciation)
+- [Backers](https://github.com/ctrlplusb/react-sizeme#backers)
 
@@ -335,1 +336,13 @@ <p>&nbsp;</p>
 We make use of the awesome [element-resize-detector](https://github.com/wnr/element-resize-detector) library. This library makes use of an scroll/object based event strategy which outperforms window resize event listening dramatically. The original idea for this approach comes from another library, namely [css-element-queries](https://github.com/marcj/css-element-queries) by Marc J. Schmidt. I recommend looking into these libraries for history, specifics, and more examples. I love them for the work they did, whithout which this library would not be possible. :sparkle-heart:
+
+<p>&nbsp;</p>
+
+---
+
+## Backers
+
+Thank goes to all our backers! [[Become a backer](https://opencollective.com/react-sizeme#backer)].
+
+<a href="https://opencollective.com/react-sizeme#backers">
+    <img src="https://opencollective.com/react-sizeme/backers.svg?width=950" />
+</a>

rollup.config.js

 const babel = require('rollup-plugin-babel')
-const changeCase = require('change-case')
+const { titleCase } = require('title-case')
 const packageJson = require('./package.json')
@@ -22,5 +22,3 @@
     sourcemap: true,
-    name: changeCase
-      .titleCase(packageJson.name.replace(/-/g, ' '))
-      .replace(/ /g, ''),
+    name: titleCase(packageJson.name.replace(/-/g, ' ')).replace(/ /g, ''),
   },
@@ -31,6 +29,9 @@ plugins: [
       exclude: 'node_modules/**',
-      presets: [['env', { modules: false }], 'stage-3', 'react'],
-      plugins: ['external-helpers', 'transform-class-properties'],
+      presets: [
+        ['@babel/preset-env', { modules: false }],
+        '@babel/preset-react',
+      ],
+      plugins: ['@babel/plugin-proposal-class-properties'],
     }),
   ],
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94525

increased by9.53%

Dev dependency count

44

decreased by-6.38%

Lines of code

685

increased by19.76%

Number of lines in readme file

347

increased by3.89%

Dependency changes

• + Addedprop-types@^15.7.2

• Updatedelement-resize-detector@^1.1.16