react-measure - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

bower.json

 {
   "name": "react-measure",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "homepage": "https://github.com/souporserious/react-measure",
@@ -5,0 +5,0 @@ "authors": [

dist/react-measure.js

@@ -100,2 +100,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
+	var _getNodeDimensions = __webpack_require__(4);
+
+	var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions);
+
 	var Measure = (function (_Component) {
@@ -117,18 +121,7 @@ function Measure() {
 	    this._cloneMounted = function (dimensions) {
-	      // determine if we need to update our callback with new dimensions or not
-	      _this._properties.forEach(function (prop) {
-	        if (dimensions[prop] !== _this._lastDimensions[prop]) {
-	          _this.props.onChange(dimensions);
+	      _this._update(dimensions);
 
-	          // store last dimensions to compare changes
-	          _this._lastDimensions = dimensions;
-
-	          // we don't need to look any further, bail out
-	          return;
-	        }
-	      });
-
 	      // remove component and portal since we no longer need it
 	      _react2['default'].unmountComponentAtNode(_this._portal);
-	      _this._destroyPortal();
+	      _this._closePortal();
 	    };
@@ -143,3 +136,8 @@ }
 	      this._node = _react2['default'].findDOMNode(this);
-	      this._cloneComponent();
+
+	      if (this.props.clone) {
+	        this._cloneComponent();
+	      } else {
+	        this._update((0, _getNodeDimensions2['default'])(this._node));
+	      }
 	    }
@@ -149,7 +147,14 @@ }, {
 	    value: function componentDidUpdate() {
-	      this._cloneComponent();
+	      // we check for parent node because we we're getting some weird issues
+	      // with React Motion specifically and it causing an error on unmount
+	      // because parent would return null, might be a bigger problem to look into
+	      if (this.props.clone && this._node.parentNode) {
+	        this._cloneComponent();
+	      } else {
+	        this._update((0, _getNodeDimensions2['default'])(this._node));
+	      }
 	    }
 	  }, {
-	    key: '_createPortal',
-	    value: function _createPortal() {
+	    key: '_openPortal',
+	    value: function _openPortal() {
 	      var portal = document.createElement('div');
@@ -163,7 +168,7 @@
 	      // append portal next to this component
-	      this._node.parentNode.insertBefore(this._portal, this._node.nextSibling);
+	      this._node.parentNode.insertBefore(portal, this._node.nextSibling);
 	    }
 	  }, {
-	    key: '_destroyPortal',
-	    value: function _destroyPortal() {
+	    key: '_closePortal',
+	    value: function _closePortal() {
 	      this._portal.parentNode.removeChild(this._portal);
@@ -179,3 +184,3 @@ }
 	      // create a portal to append clone to
-	      this._createPortal();
+	      this._openPortal();
 
@@ -186,2 +191,20 @@ // render clone to the portal
 	  }, {
+	    key: '_update',
+	    value: function _update(dimensions) {
+	      var _this2 = this;
+
+	      // determine if we need to update our callback with new dimensions or not
+	      this._properties.forEach(function (prop) {
+	        if (dimensions[prop] !== _this2._lastDimensions[prop]) {
+	          _this2.props.onChange(dimensions);
+
+	          // store last dimensions to compare changes
+	          _this2._lastDimensions = dimensions;
+
+	          // we don't need to look any further, bail out
+	          return;
+	        }
+	      });
+	    }
+	  }, {
 	    key: 'render',
@@ -194,2 +217,3 @@ value: function render() {
 	    value: {
+	      clone: _react.PropTypes.bool,
 	      whitelist: _react.PropTypes.array,
@@ -203,2 +227,3 @@ blacklist: _react.PropTypes.array,
 	    value: {
+	      clone: false,
 	      blacklist: [],
@@ -248,2 +273,6 @@ onChange: function onChange() {
 
+	var _getNodeDimensions = __webpack_require__(4);
+
+	var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions);
+
 	var MeasureChild = (function (_Component) {
@@ -263,25 +292,4 @@ function MeasureChild() {
 
-	      // set width/height to auto to get a true calculation
-	      node.style.width = 'auto';
-	      node.style.height = 'auto';
-
-	      // move node exactly on top of it's clone to calculate proper position
-	      // this also overrides any transform already set, so something like scale
-	      // won't affect the calculation, could be bad to do this,
-	      // but we'll see what happens
-	      node.style.transform = 'translateY(-100%)';
-	      node.style.WebkitTransform = 'translateY(-100%)';
-
-	      var rect = node.getBoundingClientRect();
-	      var dimensions = {
-	        width: rect.width,
-	        height: rect.height,
-	        top: rect.top,
-	        right: rect.right,
-	        bottom: rect.bottom,
-	        left: rect.left
-	      };
-
 	      // fire a callback to let Measure know our dimensions
-	      this.props.onMount(dimensions);
+	      this.props.onMount((0, _getNodeDimensions2['default'])(node, true));
 	    }
@@ -301,2 +309,43 @@ }, {
 
+/***/ },
+/* 4 */
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, '__esModule', {
+	  value: true
+	});
+	exports['default'] = getNodeDimensions;
+
+	function getNodeDimensions(node) {
+	  var clone = arguments[1] === undefined ? false : arguments[1];
+
+	  if (clone) {
+	    // set width/height to auto to get a true calculation
+	    node.style.width = 'auto';
+	    node.style.height = 'auto';
+
+	    // move node exactly on top of it's clone to calculate proper position
+	    // this also overrides any transform already set, so something like scale
+	    // won't affect the calculation, could be bad to do this,
+	    // but we'll see what happens
+	    node.style.transform = 'translateY(-100%)';
+	    node.style.WebkitTransform = 'translateY(-100%)';
+	  }
+
+	  var rect = node.getBoundingClientRect();
+
+	  return {
+	    width: rect.width,
+	    height: rect.height,
+	    top: rect.top,
+	    right: rect.right,
+	    bottom: rect.bottom,
+	    left: rect.left
+	  };
+	}
+
+	module.exports = exports['default'];
+
 /***/ }
@@ -303,0 +352,0 @@ /******/ ])

dist/react-measure.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.Measure=t(require("React")):e.Measure=t(e.React)}(this,function(e){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),c=o(3),p=n(c),Measure=function(e){function Measure(){var e=this;r(this,Measure),l(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this._whitelist=this.props.whitelist||["width","height","top","right","bottom","left"],this._properties=this._whitelist.filter(function(t){return e.props.blacklist.indexOf(t)<0}),this._portal=null,this._lastDimensions={},this._cloneMounted=function(t){e._properties.forEach(function(o){return t[o]!==e._lastDimensions[o]?(e.props.onChange(t),void(e._lastDimensions=t)):void 0}),s["default"].unmountComponentAtNode(e._portal),e._destroyPortal()}}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){this._node=s["default"].findDOMNode(this),this._cloneComponent()}},{key:"componentDidUpdate",value:function(){this._cloneComponent()}},{key:"_createPortal",value:function(){var e=document.createElement("div");e.style.cssText="\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ",this._portal=e,this._node.parentNode.insertBefore(this._portal,this._node.nextSibling)}},{key:"_destroyPortal",value:function(){this._portal.parentNode.removeChild(this._portal)}},{key:"_cloneComponent",value:function(){var e=this._cloneMounted,t=a.cloneElement(this.props.children),o=s["default"].createElement(p["default"],{onMount:e},t);this._createPortal(),s["default"].render(o,this._portal)}},{key:"render",value:function(){return a.Children.only(this.props.children)}}],[{key:"propTypes",value:{whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,onChange:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{blacklist:[],onChange:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),c=function(e){function t(){r(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){var e=s["default"].findDOMNode(this);e.style.width="auto",e.style.height="auto",e.style.transform="translateY(-100%)",e.style.WebkitTransform="translateY(-100%)";var t=e.getBoundingClientRect(),o={width:t.width,height:t.height,top:t.top,right:t.right,bottom:t.bottom,left:t.left};this.props.onMount(o)}},{key:"render",value:function(){return this.props.children}}]),t}(a.Component);t["default"]=c,e.exports=t["default"]}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.Measure=t(require("React")):e.Measure=t(e.React)}(this,function(e){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),p=o(3),c=n(p),f=o(4),d=n(f),Measure=function(e){function Measure(){var e=this;r(this,Measure),l(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this._whitelist=this.props.whitelist||["width","height","top","right","bottom","left"],this._properties=this._whitelist.filter(function(t){return e.props.blacklist.indexOf(t)<0}),this._portal=null,this._lastDimensions={},this._cloneMounted=function(t){e._update(t),s["default"].unmountComponentAtNode(e._portal),e._closePortal()}}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){this._node=s["default"].findDOMNode(this),this.props.clone?this._cloneComponent():this._update(d["default"](this._node))}},{key:"componentDidUpdate",value:function(){this.props.clone&&this._node.parentNode?this._cloneComponent():this._update(d["default"](this._node))}},{key:"_openPortal",value:function(){var e=document.createElement("div");e.style.cssText="\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ",this._portal=e,this._node.parentNode.insertBefore(e,this._node.nextSibling)}},{key:"_closePortal",value:function(){this._portal.parentNode.removeChild(this._portal)}},{key:"_cloneComponent",value:function(){var e=this._cloneMounted,t=a.cloneElement(this.props.children),o=s["default"].createElement(c["default"],{onMount:e},t);this._openPortal(),s["default"].render(o,this._portal)}},{key:"_update",value:function(e){var t=this;this._properties.forEach(function(o){return e[o]!==t._lastDimensions[o]?(t.props.onChange(e),void(t._lastDimensions=e)):void 0})}},{key:"render",value:function(){return a.Children.only(this.props.children)}}],[{key:"propTypes",value:{clone:a.PropTypes.bool,whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,onChange:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{clone:!1,blacklist:[],onChange:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),p=o(4),c=n(p),f=function(e){function t(){r(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){var e=s["default"].findDOMNode(this);this.props.onMount(c["default"](e,!0))}},{key:"render",value:function(){return this.props.children}}]),t}(a.Component);t["default"]=f,e.exports=t["default"]},function(e,t){"use strict";function o(e){var t=void 0===arguments[1]?!1:arguments[1];t&&(e.style.width="auto",e.style.height="auto",e.style.transform="translateY(-100%)",e.style.WebkitTransform="translateY(-100%)");var o=e.getBoundingClientRect();return{width:o.width,height:o.height,top:o.top,right:o.right,bottom:o.bottom,left:o.left}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]}])});

example/index.jsx

@@ -16,3 +16,6 @@ import React, { Component, Children, PropTypes } from 'react';
     return(
-      <Measure onChange={dimensions => this.setState({height: dimensions.height})}>
+      <Measure
+        clone={true}
+        onChange={dimensions => this.setState({height: dimensions.height})}
+      >
         <Spring
@@ -19,0 +22,0 @@ endValue={{

lib/Measure.js

@@ -25,2 +25,6 @@ 'use strict';
 
+var _getNodeDimensions = require('./get-node-dimensions');
+
+var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions);
+
 var Measure = (function (_Component) {
@@ -44,18 +48,7 @@ _inherits(Measure, _Component);
     this._cloneMounted = function (dimensions) {
-      // determine if we need to update our callback with new dimensions or not
-      _this._properties.forEach(function (prop) {
-        if (dimensions[prop] !== _this._lastDimensions[prop]) {
-          _this.props.onChange(dimensions);
+      _this._update(dimensions);
 
-          // store last dimensions to compare changes
-          _this._lastDimensions = dimensions;
-
-          // we don't need to look any further, bail out
-          return;
-        }
-      });
-
       // remove component and portal since we no longer need it
       _react2['default'].unmountComponentAtNode(_this._portal);
-      _this._destroyPortal();
+      _this._closePortal();
     };
@@ -68,3 +61,8 @@ }
       this._node = _react2['default'].findDOMNode(this);
-      this._cloneComponent();
+
+      if (this.props.clone) {
+        this._cloneComponent();
+      } else {
+        this._update((0, _getNodeDimensions2['default'])(this._node));
+      }
     }
@@ -74,7 +72,14 @@ }, {
     value: function componentDidUpdate() {
-      this._cloneComponent();
+      // we check for parent node because we we're getting some weird issues
+      // with React Motion specifically and it causing an error on unmount
+      // because parent would return null, might be a bigger problem to look into
+      if (this.props.clone && this._node.parentNode) {
+        this._cloneComponent();
+      } else {
+        this._update((0, _getNodeDimensions2['default'])(this._node));
+      }
     }
   }, {
-    key: '_createPortal',
-    value: function _createPortal() {
+    key: '_openPortal',
+    value: function _openPortal() {
       var portal = document.createElement('div');
@@ -88,7 +93,7 @@
       // append portal next to this component
-      this._node.parentNode.insertBefore(this._portal, this._node.nextSibling);
+      this._node.parentNode.insertBefore(portal, this._node.nextSibling);
     }
   }, {
-    key: '_destroyPortal',
-    value: function _destroyPortal() {
+    key: '_closePortal',
+    value: function _closePortal() {
       this._portal.parentNode.removeChild(this._portal);
@@ -104,3 +109,3 @@ }
       // create a portal to append clone to
-      this._createPortal();
+      this._openPortal();
 
@@ -111,2 +116,20 @@ // render clone to the portal
   }, {
+    key: '_update',
+    value: function _update(dimensions) {
+      var _this2 = this;
+
+      // determine if we need to update our callback with new dimensions or not
+      this._properties.forEach(function (prop) {
+        if (dimensions[prop] !== _this2._lastDimensions[prop]) {
+          _this2.props.onChange(dimensions);
+
+          // store last dimensions to compare changes
+          _this2._lastDimensions = dimensions;
+
+          // we don't need to look any further, bail out
+          return;
+        }
+      });
+    }
+  }, {
     key: 'render',
@@ -119,2 +142,3 @@ value: function render() {
     value: {
+      clone: _react.PropTypes.bool,
       whitelist: _react.PropTypes.array,
@@ -128,2 +152,3 @@ blacklist: _react.PropTypes.array,
     value: {
+      clone: false,
       blacklist: [],
@@ -130,0 +155,0 @@ onChange: function onChange() {

lib/MeasureChild.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _getNodeDimensions = require('./get-node-dimensions');
+
+var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions);
+
 var MeasureChild = (function (_Component) {
@@ -36,25 +40,4 @@ _inherits(MeasureChild, _Component);
 
-      // set width/height to auto to get a true calculation
-      node.style.width = 'auto';
-      node.style.height = 'auto';
-
-      // move node exactly on top of it's clone to calculate proper position
-      // this also overrides any transform already set, so something like scale
-      // won't affect the calculation, could be bad to do this,
-      // but we'll see what happens
-      node.style.transform = 'translateY(-100%)';
-      node.style.WebkitTransform = 'translateY(-100%)';
-
-      var rect = node.getBoundingClientRect();
-      var dimensions = {
-        width: rect.width,
-        height: rect.height,
-        top: rect.top,
-        right: rect.right,
-        bottom: rect.bottom,
-        left: rect.left
-      };
-
       // fire a callback to let Measure know our dimensions
-      this.props.onMount(dimensions);
+      this.props.onMount((0, _getNodeDimensions2['default'])(node, true));
     }
@@ -61,0 +44,0 @@ }, {

package.json

 {
   "name": "react-measure",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Compute measurements of React components.",
@@ -5,0 +5,0 @@ "main": "lib/react-measure.js",

README.md

@@ -1,2 +0,2 @@
-## React Measure 0.1.1
+## React Measure 0.1.2
 
@@ -11,3 +11,3 @@ Compute measurements of React components.
 
-## Example Usage using ES6 & Babel Stage 0
+## Example using ES6 & Babel Stage 0
 
@@ -19,3 +19,3 @@ ```javascript
   state = {
-    measurements: {}
+    dimensions: {}
   }
@@ -28,8 +28,9 @@
       <Measure
+        clone={true}
         whitelist={['width', 'height']}
         blacklist={['top', 'left']}
-        onChange={m => this.setState({measurements: m})}
+        onChange={d => this.setState({dimensions: d})}
       >
         <div>
-          I can do cool things with my measurements now :D
+          I can do cool things with my dimensions now :D
         </div>
@@ -66,2 +67,5 @@ </Measure>
 ## CHANGELOG
+### 0.1.2
+Clone prop now exposed to allow optional cloning of component
+
 ### 0.1.1
@@ -68,0 +72,0 @@ Set width/height to auto on clone no matter what to get a true dimension

src/Measure.jsx

 import React, { Component, Children, PropTypes, cloneElement } from 'react'
 import MeasureChild from './MeasureChild'
+import getNodeDimensions from './get-node-dimensions'
 
 class Measure extends Component {
   static propTypes = {
+    clone: PropTypes.bool,
     whitelist: PropTypes.array,
@@ -11,2 +13,3 @@ blacklist: PropTypes.array,
   static defaultProps = {
+    clone: false,
     blacklist: [],
@@ -22,10 +25,22 @@ onChange: () => null
     this._node = React.findDOMNode(this)
-    this._cloneComponent()
+
+    if(this.props.clone) {
+      this._cloneComponent()
+    } else {
+      this._update(getNodeDimensions(this._node))
+    }
   }
 
   componentDidUpdate() {
-    this._cloneComponent();
+    // we check for parent node because we we're getting some weird issues
+    // with React Motion specifically and it causing an error on unmount
+    // because parent would return null, might be a bigger problem to look into
+    if(this.props.clone && this._node.parentNode) {
+      this._cloneComponent()
+    } else {
+      this._update(getNodeDimensions(this._node))
+    }
   }
 
-  _createPortal() {
+  _openPortal() {
     const portal = document.createElement('div')
@@ -43,6 +58,6 @@
     // append portal next to this component
-    this._node.parentNode.insertBefore(this._portal, this._node.nextSibling)
+    this._node.parentNode.insertBefore(portal, this._node.nextSibling)
   }
 
-  _destroyPortal() {
+  _closePortal() {
     this._portal.parentNode.removeChild(this._portal);
@@ -52,22 +67,11 @@ }
   _cloneMounted = (dimensions) => {
-    // determine if we need to update our callback with new dimensions or not
-    this._properties.forEach(prop => {
-      if(dimensions[prop] !== this._lastDimensions[prop]) {
-        this.props.onChange(dimensions)
+    this._update(dimensions)
 
-        // store last dimensions to compare changes
-        this._lastDimensions = dimensions
-
-        // we don't need to look any further, bail out
-        return
-      }
-    })
-
     // remove component and portal since we no longer need it
     React.unmountComponentAtNode(this._portal)
-    this._destroyPortal()
+    this._closePortal()
   }
 
   _cloneComponent() {
-    const onMount = this._cloneMounted;
+    const onMount = this._cloneMounted
     const clone = cloneElement(this.props.children)
@@ -77,3 +81,3 @@ const child = React.createElement(MeasureChild, {onMount}, clone)
     // create a portal to append clone to
-    this._createPortal()
+    this._openPortal()
 
@@ -84,2 +88,17 @@ // render clone to the portal
 
+  _update(dimensions) {
+    // determine if we need to update our callback with new dimensions or not
+    this._properties.forEach(prop => {
+      if(dimensions[prop] !== this._lastDimensions[prop]) {
+        this.props.onChange(dimensions)
+
+        // store last dimensions to compare changes
+        this._lastDimensions = dimensions
+
+        // we don't need to look any further, bail out
+        return
+      }
+    })
+  }
+
   render() {
@@ -86,0 +105,0 @@ return Children.only(this.props.children)

src/MeasureChild.jsx

 import React, { Component } from 'react'
+import getNodeDimensions from './get-node-dimensions'
 
@@ -6,26 +7,5 @@ class MeasureChild extends Component {
     const node = React.findDOMNode(this)
-  
-    // set width/height to auto to get a true calculation
-    node.style.width = 'auto'
-    node.style.height = 'auto'
 
-    // move node exactly on top of it's clone to calculate proper position
-    // this also overrides any transform already set, so something like scale
-    // won't affect the calculation, could be bad to do this,
-    // but we'll see what happens
-    node.style.transform = 'translateY(-100%)'
-    node.style.WebkitTransform = 'translateY(-100%)'
-
-    const rect = node.getBoundingClientRect();
-    const dimensions = {
-      width: rect.width,
-      height: rect.height,
-      top: rect.top,
-      right: rect.right,
-      bottom: rect.bottom,
-      left: rect.left,
-    }
-
     // fire a callback to let Measure know our dimensions
-    this.props.onMount(dimensions)
+    this.props.onMount(getNodeDimensions(node, true))
   }
@@ -32,0 +12,0 @@

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

43219

increased by9.59%

Number of downloads

322201

increased by1.85%

Number of package files

20

increased by11.11%

Lines of code

772

increased by13.86%

Number of lines in readme file

77

increased by5.48%

No dependency changes