react-measure - npm Package Compare versions

Comparing version 2.1.2 to 2.1.3

CHANGELOG.md

 ## CHANGELOG
 
+### 2.1.3
+
+Update `resize-observer-polyfill`
+[#88](https://github.com/souporserious/react-measure/pull/88)
+
+Added handling when `getComputedStyle` returns `null`
+[#89](https://github.com/souporserious/react-measure/pull/89)
+
+Call `setState` within `requestAnimationFrame` to prevent infinite loop
+[#118](https://github.com/souporserious/react-measure/pull/118)
+
 ### 2.1.2
@@ -4,0 +15,0 @@

dist/react-measure.js

 /*!
- * React Measure 2.1.2
+ * React Measure 2.1.3
  * https://github.com/souporserious/react-measure
@@ -1246,3 +1246,7 @@ * Copyright (c) 2018 React Measure Authors
 
-	          _this.setState({ contentRect: contentRect });
+	          _this.animationFrameID = window.requestAnimationFrame(function () {
+	            if (_this._resizeObserver) {
+	              _this.setState({ contentRect: contentRect });
+	            }
+	          });
 
@@ -1272,2 +1276,3 @@ if (typeof _this.props.onResize === 'function') {
 	          this._resizeObserver = new _resizeObserverPolyfill2.default(this.measure);
+	          this.animationFrameID = null;
 	        }
@@ -1281,2 +1286,3 @@ }, {
 	          this._resizeObserver = null;
+	          window.cancelAnimationFrame(this.animationFrameID);
 	        }
@@ -1396,6 +1402,6 @@ }, {
 	    calculations.margin = {
-	      top: parseInt(styles.marginTop),
-	      right: parseInt(styles.marginRight),
-	      bottom: parseInt(styles.marginBottom),
-	      left: parseInt(styles.marginLeft)
+	      top: styles ? parseInt(styles.marginTop) : 0,
+	      right: styles ? parseInt(styles.marginRight) : 0,
+	      bottom: styles ? parseInt(styles.marginBottom) : 0,
+	      left: styles ? parseInt(styles.marginLeft) : 0
 	    };
@@ -1402,0 +1408,0 @@ }

dist/react-measure.min.js

 /*!
- * React Measure 2.1.2
+ * React Measure 2.1.3
  * https://github.com/souporserious/react-measure
  * Copyright (c) 2018 React Measure Authors
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["react","resize-observer-polyfill"],t):"object"==typeof exports?exports.Measure=t(require("react"),require("resize-observer-polyfill")):e.Measure=t(e.React,e.ResizeObserver)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.withContentRect=t.default=void 0;var o=n(1),i=r(o),u=n(12),a=r(u);t.default=i.default,t.withContentRect=a.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=(r(o),n(3)),u=r(i),a=n(12),f=r(a),Measure=(0,f.default)()(function(e){var t=e.measure,n=e.measureRef,r=e.contentRect,o=e.children;return o({measure:t,measureRef:n,contentRect:r})});Measure.displayName="Measure",Measure.propTypes.children=u.default.func,t.default=Measure},function(t,n){t.exports=e},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,i=function(e){return"object"===("undefined"==typeof e?"undefined":r(e))&&null!==e&&e.$$typeof===o},u=!0;e.exports=n(5)(i,u)}else e.exports=n(11)()}).call(t,n(4))},function(e,t){"use strict";function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(s===setTimeout)return setTimeout(e,0);if((s===n||!s)&&setTimeout)return s=setTimeout,setTimeout(e,0);try{return s(e,0)}catch(t){try{return s.call(null,e,0)}catch(t){return s.call(this,e,0)}}}function i(e){if(l===clearTimeout)return clearTimeout(e);if((l===r||!l)&&clearTimeout)return l=clearTimeout,clearTimeout(e);try{return l(e)}catch(t){try{return l.call(null,e)}catch(t){return l.call(this,e)}}}function u(){v&&d&&(v=!1,d.length?y=d.concat(y):h=-1,y.length&&a())}function a(){if(!v){var e=o(u);v=!0;for(var t=y.length;t;){for(d=y,y=[];++h<t;)d&&d[h].run();h=-1,t=y.length}d=null,v=!1,i(e)}}function f(e,t){this.fun=e,this.array=t}function c(){}var s,l,p=e.exports={};!function(){try{s="function"==typeof setTimeout?setTimeout:n}catch(e){s=n}try{l="function"==typeof clearTimeout?clearTimeout:r}catch(e){l=r}}();var d,y=[],v=!1,h=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];y.push(new f(e,t)),1!==y.length||v||o(a)},f.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=n(6),i=n(7),u=n(8),a=n(9),f=n(10);e.exports=function(e,n){function c(e){var t=e&&(P&&e[P]||e[N]);if("function"==typeof t)return t}function s(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function l(e){this.message=e,this.stack=""}function p(e){function r(r,c,s,p,d,y,v){if(p=p||k,y=y||s,v!==a)if(n)i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var h=p+":"+s;!o[h]&&f<3&&(u(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",y,p),o[h]=!0,f++)}return null==c[s]?r?new l(null===c[s]?"The "+d+" `"+y+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+y+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(c,s,p,d,y)}if("production"!==t.env.NODE_ENV)var o={},f=0;var c=r.bind(null,!1);return c.isRequired=r.bind(null,!0),c}function d(e){function t(t,n,r,o,i,u){var a=t[n],f=x(a);if(f!==e){var c=E(a);return new l("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function y(){return p(o.thatReturnsNull)}function v(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var f=x(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+f+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<u.length;c++){var s=e(u,c,r,o,i+"["+c+"]",a);if(s instanceof Error)return s}return null}return p(t)}function h(){function t(t,n,r,o,i){var u=t[n];if(!e(u)){var a=x(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return p(t)}function m(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var u=e.name||k,a=S(t[n]);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected ")+("instance of `"+u+"`."))}return null}return p(t)}function b(e){function n(t,n,r,o,i){for(var u=t[n],a=0;a<e.length;a++)if(s(u,e[a]))return null;var f=JSON.stringify(e);return new l("Invalid "+o+" `"+i+"` of value `"+u+"` "+("supplied to `"+r+"`, expected one of "+f+"."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,o.thatReturnsNull)}function g(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var u=t[n],f=x(u);if("object"!==f)return new l("Invalid "+o+" `"+i+"` of type "+("`"+f+"` supplied to `"+r+"`, expected an object."));for(var c in u)if(u.hasOwnProperty(c)){var s=e(u,c,r,o,i+"."+c,a);if(s instanceof Error)return s}return null}return p(t)}function O(e){function n(t,n,r,o,i){for(var u=0;u<e.length;u++){var f=e[u];if(null==f(t,n,r,o,i,a))return null}return new l("Invalid "+o+" `"+i+"` supplied to "+("`"+r+"`."))}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,o.thatReturnsNull;for(var r=0;r<e.length;r++){var i=e[r];if("function"!=typeof i)return u(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",j(i),r),o.thatReturnsNull}return p(n)}function w(){function e(e,t,n,r,o){return _(e[t])?null:new l("Invalid "+r+" `"+o+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return p(e)}function T(e){function t(t,n,r,o,i){var u=t[n],f=x(u);if("object"!==f)return new l("Invalid "+o+" `"+i+"` of type `"+f+"` "+("supplied to `"+r+"`, expected `object`."));for(var c in e){var s=e[c];if(s){var p=s(u,c,r,o,i+"."+c,a);if(p)return p}}return null}return p(t)}function _(t){switch("undefined"==typeof t?"undefined":r(t)){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(_);if(null===t||e(t))return!0;var n=c(t);if(!n)return!1;var o,i=n.call(t);if(n!==t.entries){for(;!(o=i.next()).done;)if(!_(o.value))return!1}else for(;!(o=i.next()).done;){var u=o.value;if(u&&!_(u[1]))return!1}return!0;default:return!1}}function R(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function x(e){var t="undefined"==typeof e?"undefined":r(e);return Array.isArray(e)?"array":e instanceof RegExp?"object":R(t,e)?"symbol":t}function E(e){if("undefined"==typeof e||null===e)return""+e;var t=x(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function j(e){var t=E(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function S(e){return e.constructor&&e.constructor.name?e.constructor.name:k}var P="function"==typeof Symbol&&Symbol.iterator,N="@@iterator",k="<<anonymous>>",I={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:y(),arrayOf:v,element:h(),instanceOf:m,node:w(),objectOf:g,oneOf:b,oneOfType:O,shape:T};return l.prototype=Error.prototype,I.checkPropTypes=f,I.PropTypes=I,I}}).call(t,n(4))},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){(function(t){"use strict";function n(e,t,n,o,i,u,a,f){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,o,i,u,a,f],l=0;c=new Error(t.replace(/%s/g,function(){return s[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(4))},function(e,t,n){(function(t){"use strict";var r=n(6),o=r;"production"!==t.env.NODE_ENV&&!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),e.exports=o}).call(t,n(4))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function r(e,n,r,c,s){if("production"!==t.env.NODE_ENV)for(var l in e)if(e.hasOwnProperty(l)){var p;try{i("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,l),p=e[l](n,l,c,r,null,a)}catch(e){p=e}if(u(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,l,"undefined"==typeof p?"undefined":o(p)),p instanceof Error&&!(p.message in f)){f[p.message]=!0;var d=s?s():"";u(!1,"Failed %s type: %s%s",r,p.message,null!=d?d:"")}}}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV)var i=n(7),u=n(8),a=n(9),f={};e.exports=r}).call(t,n(4))},function(e,t,n){"use strict";var r=n(6),o=n(7),i=n(9);e.exports=function(){function e(e,t,n,r,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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}function a(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)}function f(e){return function(t){var n,r;return r=n=function(n){function r(){var t,n,o,a;i(this,r);for(var f=arguments.length,c=Array(f),s=0;s<f;s++)c[s]=arguments[s];return n=o=u(this,(t=r.__proto__||Object.getPrototypeOf(r)).call.apply(t,[this].concat(c))),o.state={contentRect:{entry:{},client:{},offset:{},scroll:{},bounds:{},margin:{}}},o.measure=function(t){var n=(0,g.default)(o._node,e||(0,m.default)(o.props));t&&(n.entry=t[0].contentRect),o.setState({contentRect:n}),"function"==typeof o.props.onResize&&o.props.onResize(n)},o._handleRef=function(e){o._resizeObserver&&(e?o._resizeObserver.observe(e):o._resizeObserver.disconnect(o._node)),o._node=e,"function"==typeof o.props.innerRef&&o.props.innerRef(e)},a=n,u(o,a)}return a(r,n),s(r,[{key:"componentWillMount",value:function(){this._resizeObserver=new v.default(this.measure)}},{key:"componentWillUnmount",value:function(){this._resizeObserver&&this._node&&this._resizeObserver.disconnect(this._node),this._resizeObserver=null}},{key:"render",value:function(){var e=this.props,n=(e.innerRef,e.onResize,o(e,["innerRef","onResize"]));return(0,l.createElement)(t,c({},n,{measureRef:this._handleRef,measure:this.measure,contentRect:this.state.contentRect}))}}]),r}(l.Component),n.propTypes={client:d.default.bool,offset:d.default.bool,scroll:d.default.bool,bounds:d.default.bool,margin:d.default.bool,innerRef:d.default.func,onResize:d.default.func},r}}Object.defineProperty(t,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(2),p=(r(l),n(3)),d=r(p),y=n(13),v=r(y),h=n(14),m=r(h),b=n(15),g=r(b);t.default=f},function(e,n){e.exports=t},function(e,t){"use strict";function n(e){var t=[];return r.forEach(function(n){e[n]&&t.push(n)}),t}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n;var r=["client","offset","scroll","bounds","margin"]},function(e,t){"use strict";function n(e,t){var n={};if(t.indexOf("client")>-1&&(n.client={top:e.clientTop,left:e.clientLeft,width:e.clientWidth,height:e.clientHeight}),t.indexOf("offset")>-1&&(n.offset={top:e.offsetTop,left:e.offsetLeft,width:e.offsetWidth,height:e.offsetHeight}),t.indexOf("scroll")>-1&&(n.scroll={top:e.scrollTop,left:e.scrollLeft,width:e.scrollWidth,height:e.scrollHeight}),t.indexOf("bounds")>-1){var r=e.getBoundingClientRect();n.bounds={top:r.top,right:r.right,bottom:r.bottom,left:r.left,width:r.width,height:r.height}}if(t.indexOf("margin")>-1){var o=getComputedStyle(e);n.margin={top:parseInt(o.marginTop),right:parseInt(o.marginRight),bottom:parseInt(o.marginBottom),left:parseInt(o.marginLeft)}}return n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("resize-observer-polyfill")):"function"==typeof define&&define.amd?define(["react","resize-observer-polyfill"],t):"object"==typeof exports?exports.Measure=t(require("react"),require("resize-observer-polyfill")):e.Measure=t(e.React,e.ResizeObserver)}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.withContentRect=t.default=void 0;var o=n(1),i=r(o),u=n(12),a=r(u);t.default=i.default,t.withContentRect=a.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=(r(o),n(3)),u=r(i),a=n(12),f=r(a),Measure=(0,f.default)()(function(e){var t=e.measure,n=e.measureRef,r=e.contentRect,o=e.children;return o({measure:t,measureRef:n,contentRect:r})});Measure.displayName="Measure",Measure.propTypes.children=u.default.func,t.default=Measure},function(t,n){t.exports=e},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV){var o="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,i=function(e){return"object"===("undefined"==typeof e?"undefined":r(e))&&null!==e&&e.$$typeof===o},u=!0;e.exports=n(5)(i,u)}else e.exports=n(11)()}).call(t,n(4))},function(e,t){"use strict";function n(){throw new Error("setTimeout has not been defined")}function r(){throw new Error("clearTimeout has not been defined")}function o(e){if(s===setTimeout)return setTimeout(e,0);if((s===n||!s)&&setTimeout)return s=setTimeout,setTimeout(e,0);try{return s(e,0)}catch(t){try{return s.call(null,e,0)}catch(t){return s.call(this,e,0)}}}function i(e){if(l===clearTimeout)return clearTimeout(e);if((l===r||!l)&&clearTimeout)return l=clearTimeout,clearTimeout(e);try{return l(e)}catch(t){try{return l.call(null,e)}catch(t){return l.call(this,e)}}}function u(){v&&d&&(v=!1,d.length?y=d.concat(y):h=-1,y.length&&a())}function a(){if(!v){var e=o(u);v=!0;for(var t=y.length;t;){for(d=y,y=[];++h<t;)d&&d[h].run();h=-1,t=y.length}d=null,v=!1,i(e)}}function f(e,t){this.fun=e,this.array=t}function c(){}var s,l,p=e.exports={};!function(){try{s="function"==typeof setTimeout?setTimeout:n}catch(e){s=n}try{l="function"==typeof clearTimeout?clearTimeout:r}catch(e){l=r}}();var d,y=[],v=!1,h=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];y.push(new f(e,t)),1!==y.length||v||o(a)},f.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t,n){(function(t){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=n(6),i=n(7),u=n(8),a=n(9),f=n(10);e.exports=function(e,n){function c(e){var t=e&&(P&&e[P]||e[N]);if("function"==typeof t)return t}function s(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function l(e){this.message=e,this.stack=""}function p(e){function r(r,c,s,p,d,y,v){if(p=p||I,y=y||s,v!==a)if(n)i(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var h=p+":"+s;!o[h]&&f<3&&(u(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",y,p),o[h]=!0,f++)}return null==c[s]?r?new l(null===c[s]?"The "+d+" `"+y+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+y+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(c,s,p,d,y)}if("production"!==t.env.NODE_ENV)var o={},f=0;var c=r.bind(null,!1);return c.isRequired=r.bind(null,!0),c}function d(e){function t(t,n,r,o,i,u){var a=t[n],f=x(a);if(f!==e){var c=E(a);return new l("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+r+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function y(){return p(o.thatReturnsNull)}function v(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside arrayOf.");var u=t[n];if(!Array.isArray(u)){var f=x(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+f+"` supplied to `"+r+"`, expected an array."))}for(var c=0;c<u.length;c++){var s=e(u,c,r,o,i+"["+c+"]",a);if(s instanceof Error)return s}return null}return p(t)}function h(){function t(t,n,r,o,i){var u=t[n];if(!e(u)){var a=x(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected a single ReactElement."))}return null}return p(t)}function m(e){function t(t,n,r,o,i){if(!(t[n]instanceof e)){var u=e.name||I,a=S(t[n]);return new l("Invalid "+o+" `"+i+"` of type "+("`"+a+"` supplied to `"+r+"`, expected ")+("instance of `"+u+"`."))}return null}return p(t)}function b(e){function n(t,n,r,o,i){for(var u=t[n],a=0;a<e.length;a++)if(s(u,e[a]))return null;var f=JSON.stringify(e);return new l("Invalid "+o+" `"+i+"` of value `"+u+"` "+("supplied to `"+r+"`, expected one of "+f+"."))}return Array.isArray(e)?p(n):("production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,o.thatReturnsNull)}function g(e){function t(t,n,r,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var u=t[n],f=x(u);if("object"!==f)return new l("Invalid "+o+" `"+i+"` of type "+("`"+f+"` supplied to `"+r+"`, expected an object."));for(var c in u)if(u.hasOwnProperty(c)){var s=e(u,c,r,o,i+"."+c,a);if(s instanceof Error)return s}return null}return p(t)}function O(e){function n(t,n,r,o,i){for(var u=0;u<e.length;u++){var f=e[u];if(null==f(t,n,r,o,i,a))return null}return new l("Invalid "+o+" `"+i+"` supplied to "+("`"+r+"`."))}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV?u(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,o.thatReturnsNull;for(var r=0;r<e.length;r++){var i=e[r];if("function"!=typeof i)return u(!1,"Invalid argument supplid to oneOfType. Expected an array of check functions, but received %s at index %s.",j(i),r),o.thatReturnsNull}return p(n)}function w(){function e(e,t,n,r,o){return T(e[t])?null:new l("Invalid "+r+" `"+o+"` supplied to "+("`"+n+"`, expected a ReactNode."))}return p(e)}function _(e){function t(t,n,r,o,i){var u=t[n],f=x(u);if("object"!==f)return new l("Invalid "+o+" `"+i+"` of type `"+f+"` "+("supplied to `"+r+"`, expected `object`."));for(var c in e){var s=e[c];if(s){var p=s(u,c,r,o,i+"."+c,a);if(p)return p}}return null}return p(t)}function T(t){switch("undefined"==typeof t?"undefined":r(t)){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(T);if(null===t||e(t))return!0;var n=c(t);if(!n)return!1;var o,i=n.call(t);if(n!==t.entries){for(;!(o=i.next()).done;)if(!T(o.value))return!1}else for(;!(o=i.next()).done;){var u=o.value;if(u&&!T(u[1]))return!1}return!0;default:return!1}}function R(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function x(e){var t="undefined"==typeof e?"undefined":r(e);return Array.isArray(e)?"array":e instanceof RegExp?"object":R(t,e)?"symbol":t}function E(e){if("undefined"==typeof e||null===e)return""+e;var t=x(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function j(e){var t=E(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function S(e){return e.constructor&&e.constructor.name?e.constructor.name:I}var P="function"==typeof Symbol&&Symbol.iterator,N="@@iterator",I="<<anonymous>>",k={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:y(),arrayOf:v,element:h(),instanceOf:m,node:w(),objectOf:g,oneOf:b,oneOfType:O,shape:_};return l.prototype=Error.prototype,k.checkPropTypes=f,k.PropTypes=k,k}}).call(t,n(4))},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){(function(t){"use strict";function n(e,t,n,o,i,u,a,f){if(r(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,o,i,u,a,f],l=0;c=new Error(t.replace(/%s/g,function(){return s[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var r=function(e){};"production"!==t.env.NODE_ENV&&(r=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=n}).call(t,n(4))},function(e,t,n){(function(t){"use strict";var r=n(6),o=r;"production"!==t.env.NODE_ENV&&!function(){var e=function(e){for(var t=arguments.length,n=Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=0,i="Warning: "+e.replace(/%s/g,function(){return n[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(t,n){if(void 0===n)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==n.indexOf("Failed Composite propType: ")&&!t){for(var r=arguments.length,o=Array(r>2?r-2:0),i=2;i<r;i++)o[i-2]=arguments[i];e.apply(void 0,[n].concat(o))}}}(),e.exports=o}).call(t,n(4))},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){(function(t){"use strict";function r(e,n,r,c,s){if("production"!==t.env.NODE_ENV)for(var l in e)if(e.hasOwnProperty(l)){var p;try{i("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",c||"React class",r,l),p=e[l](n,l,c,r,null,a)}catch(e){p=e}if(u(!p||p instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",c||"React class",r,l,"undefined"==typeof p?"undefined":o(p)),p instanceof Error&&!(p.message in f)){f[p.message]=!0;var d=s?s():"";u(!1,"Failed %s type: %s%s",r,p.message,null!=d?d:"")}}}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};if("production"!==t.env.NODE_ENV)var i=n(7),u=n(8),a=n(9),f={};e.exports=r}).call(t,n(4))},function(e,t,n){"use strict";var r=n(6),o=n(7),i=n(9);e.exports=function(){function e(e,t,n,r,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(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}function a(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)}function f(e){return function(t){var n,r;return r=n=function(n){function r(){var t,n,o,a;i(this,r);for(var f=arguments.length,c=Array(f),s=0;s<f;s++)c[s]=arguments[s];return n=o=u(this,(t=r.__proto__||Object.getPrototypeOf(r)).call.apply(t,[this].concat(c))),o.state={contentRect:{entry:{},client:{},offset:{},scroll:{},bounds:{},margin:{}}},o.measure=function(t){var n=(0,g.default)(o._node,e||(0,m.default)(o.props));t&&(n.entry=t[0].contentRect),o.animationFrameID=window.requestAnimationFrame(function(){o._resizeObserver&&o.setState({contentRect:n})}),"function"==typeof o.props.onResize&&o.props.onResize(n)},o._handleRef=function(e){o._resizeObserver&&(e?o._resizeObserver.observe(e):o._resizeObserver.disconnect(o._node)),o._node=e,"function"==typeof o.props.innerRef&&o.props.innerRef(e)},a=n,u(o,a)}return a(r,n),s(r,[{key:"componentWillMount",value:function(){this._resizeObserver=new v.default(this.measure),this.animationFrameID=null}},{key:"componentWillUnmount",value:function(){this._resizeObserver&&this._node&&this._resizeObserver.disconnect(this._node),this._resizeObserver=null,window.cancelAnimationFrame(this.animationFrameID)}},{key:"render",value:function(){var e=this.props,n=(e.innerRef,e.onResize,o(e,["innerRef","onResize"]));return(0,l.createElement)(t,c({},n,{measureRef:this._handleRef,measure:this.measure,contentRect:this.state.contentRect}))}}]),r}(l.Component),n.propTypes={client:d.default.bool,offset:d.default.bool,scroll:d.default.bool,bounds:d.default.bool,margin:d.default.bool,innerRef:d.default.func,onResize:d.default.func},r}}Object.defineProperty(t,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),l=n(2),p=(r(l),n(3)),d=r(p),y=n(13),v=r(y),h=n(14),m=r(h),b=n(15),g=r(b);t.default=f},function(e,n){e.exports=t},function(e,t){"use strict";function n(e){var t=[];return r.forEach(function(n){e[n]&&t.push(n)}),t}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n;var r=["client","offset","scroll","bounds","margin"]},function(e,t){"use strict";function n(e,t){var n={};if(t.indexOf("client")>-1&&(n.client={top:e.clientTop,left:e.clientLeft,width:e.clientWidth,height:e.clientHeight}),t.indexOf("offset")>-1&&(n.offset={top:e.offsetTop,left:e.offsetLeft,width:e.offsetWidth,height:e.offsetHeight}),t.indexOf("scroll")>-1&&(n.scroll={top:e.scrollTop,left:e.scrollLeft,width:e.scrollWidth,height:e.scrollHeight}),t.indexOf("bounds")>-1){var r=e.getBoundingClientRect();n.bounds={top:r.top,right:r.right,bottom:r.bottom,left:r.left,width:r.width,height:r.height}}if(t.indexOf("margin")>-1){var o=getComputedStyle(e);n.margin={top:o?parseInt(o.marginTop):0,right:o?parseInt(o.marginRight):0,bottom:o?parseInt(o.marginBottom):0,left:o?parseInt(o.marginLeft):0}}return n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n}])});

lib/get-content-rect.js

@@ -51,6 +51,6 @@ 'use strict';
     calculations.margin = {
-      top: parseInt(styles.marginTop),
-      right: parseInt(styles.marginRight),
-      bottom: parseInt(styles.marginBottom),
-      left: parseInt(styles.marginLeft)
+      top: styles ? parseInt(styles.marginTop) : 0,
+      right: styles ? parseInt(styles.marginRight) : 0,
+      bottom: styles ? parseInt(styles.marginBottom) : 0,
+      left: styles ? parseInt(styles.marginLeft) : 0
     };
@@ -57,0 +57,0 @@ }

lib/with-content-rect.js

@@ -75,3 +75,7 @@ 'use strict';
 
-          _this.setState({ contentRect: contentRect });
+          _this.animationFrameID = window.requestAnimationFrame(function () {
+            if (_this._resizeObserver) {
+              _this.setState({ contentRect: contentRect });
+            }
+          });
 
@@ -101,2 +105,3 @@ if (typeof _this.props.onResize === 'function') {
           this._resizeObserver = new _resizeObserverPolyfill2.default(this.measure);
+          this.animationFrameID = null;
         }
@@ -110,2 +115,3 @@ }, {
           this._resizeObserver = null;
+          window.cancelAnimationFrame(this.animationFrameID);
         }
@@ -112,0 +118,0 @@ }, {

package.json

 {
   "name": "react-measure",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Compute measurements of React components.",
@@ -46,3 +46,3 @@ "main": "lib/react-measure.js",
     "prop-types": "^15.5.10",
-    "resize-observer-polyfill": "^1.4.2"
+    "resize-observer-polyfill": "^1.5.0"
   },
@@ -49,0 +49,0 @@ "devDependencies": {

README.md

@@ -6,13 +6,11 @@ ## React Measure
 
-Compute measurements of React components. Uses [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill) to detect changes of an element and return the new dimensions.
+Compute measurements of React components. Uses
+[resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill)
+to detect changes of an element and return the new dimensions.
 
-## ☢️ New Version in progress
-
-Please make sure to install `2.0.0` for now and use these docs. Or follow along with the [rewrite](https://github.com/souporserious/react-measure/tree/rewrite) branch to try out the new experimental API.
-
 ## Install
 
-`yarn add react-measure@^2.0.0`
+`yarn add react-measure`
 
-`npm install react-measure@^2.0.0 --save`
+`npm install react-measure --save`
 
@@ -34,3 +32,7 @@ ```html
 
-[clientTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop), [clientLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft), [clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth), and [clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight).
+[clientTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop),
+[clientLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientLeft),
+[clientWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth),
+and
+[clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight).
 
@@ -41,3 +43,7 @@ #### `offset`: PropTypes.bool
 
-[offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop), [offsetLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetLeft), [offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetWidth), and [offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetHeight).
+[offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop),
+[offsetLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetLeft),
+[offsetWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetWidth),
+and
+[offsetHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/offsetHeight).
 
@@ -48,11 +54,21 @@ #### `scroll`: PropTypes.bool
 
-[scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop), [scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft), [scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth), and [scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight).
+[scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop),
+[scrollLeft](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft),
+[scrollWidth](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth),
+and
+[scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight).
 
 #### `bounds`: PropTypes.bool
 
-Uses [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) to calculate the element rect and add it to `contentRect.bounds` returned in the child function.
+Uses
+[getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
+to calculate the element rect and add it to `contentRect.bounds` returned in the
+child function.
 
 #### `margin`: PropTypes.bool
 
-Uses [getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) to calculate margins and add it to `contentRect.margin` returned in the child function.
+Uses
+[getComputedStyle](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
+to calculate margins and add it to `contentRect.margin` returned in the child
+function.
 
@@ -65,3 +81,4 @@ #### `innerRef`: PropTypes.func
 
-Callback invoked when either element width or height have changed.
+Callback invoked when either element width or height have changed. Note that
+this will be called on mount to get the initial values.
 
@@ -72,7 +89,11 @@ #### `children`: PropTypes.func
 
-- `measureRef`: must be passed down to your component's ref in order to obtain a proper node to measure
+- `measureRef`: must be passed down to your component's ref in order to obtain a
+  proper node to measure
 
-- `measure`: use to programmatically measure your component, calls the internal `measure` method in `withContentRect`
+- `measure`: use to programmatically measure your component, calls the internal
+  `measure` method in `withContentRect`
 
-- `contentRect`: this will contain any of the following allowed rects from above: `client`, `offset`, `scroll`, `bounds`, or `margin`. It will also include `entry` from the `ResizeObserver` when available.
+- `contentRect`: this will contain any of the following allowed rects from
+  above: `client`, `offset`, `scroll`, `bounds`, or `margin`. It will also
+  include `entry` from the `ResizeObserver` when available.
 
@@ -89,4 +110,4 @@ ### Example
       width: -1,
-      height: -1
-    }
+      height: -1,
+    },
   }
@@ -96,5 +117,3 @@
     const { width, height } = this.state.dimensions
-    const className = classNames(
-      (width < 400) && 'small-width-modifier'
-    )
+    const className = classNames(width < 400 && 'small-width-modifier')
 
@@ -104,15 +123,14 @@ return (
         bounds
-        onResize={(contentRect) => {
+        onResize={contentRect => {
           this.setState({ dimensions: contentRect.bounds })
         }}
       >
-        {({ measureRef }) =>
+        {({ measureRef }) => (
           <div ref={measureRef} className={className}>
             I can do cool things with my dimensions now :D
-
-            { (height > 250) &&
+            {height > 250 && (
               <div>Render responsive content based on the component size!</div>
-            }
+            )}
           </div>
-        }
+        )}
       </Measure>
@@ -126,9 +144,21 @@ )
 
-A higher-order component that provides dimensions to the wrapped component. Accepts `types`, which determines what measurements are returned, similar to above. Then returns a function to pass the component you want measured.
+A higher-order component that provides dimensions to the wrapped component.
+Accepts `types`, which determines what measurements are returned, similar to
+above. Then returns a function to pass the component you want measured.
 
-Pass an array or single value of either `client`, `offset`, `scroll`, `bounds`, or `margin` to calculate and receive those measurements as the prop `contentRect` in your wrapped component. You can also use the `measure` function passed down to programmatically measure your component if you need to. And finally, remember to pass down the `measureRef` to the component you want measured.
+Pass an array or single value of either `client`, `offset`, `scroll`, `bounds`,
+or `margin` to calculate and receive those measurements as the prop
+`contentRect` in your wrapped component. You can also use the `measure` function
+passed down to programmatically measure your component if you need to. And
+finally, remember to pass down the `measureRef` to the component you want
+measured.
 
-Passes down the same props as the `Measure` child function above, `measureRef`, `measure`, and `contentRect`.
+Passes down the same props as the `Measure` child function above, `measureRef`,
+`measure`, and `contentRect`.
 
-Fun fact, the `Measure` component is a thin wrapper around `withContentRect`. Just check [the source](https://github.com/souporserious/react-measure/blob/master/src/Measure.jsx). This means your wrapped component will accept the same props as `Measure` does 😊
+Fun fact, the `Measure` component is a thin wrapper around `withContentRect`.
+Just check
+[the source](https://github.com/souporserious/react-measure/blob/master/src/Measure.jsx).
+This means your wrapped component will accept the same props as `Measure` does
+😊
 
@@ -140,10 +170,10 @@ ### Example
 
-const ItemToMeasure = withContentRect('bounds')(({ measureRef, measure, contentRect }) => (
-  <div ref={measureRef}>
-    Some content here
-    <pre>
-      {JSON.stringify(contentRect, null, 2)}
-    </pre>
-  </div>
-))
+const ItemToMeasure = withContentRect('bounds')(
+  ({ measureRef, measure, contentRect }) => (
+    <div ref={measureRef}>
+      Some content here
+      <pre>{JSON.stringify(contentRect, null, 2)}</pre>
+    </div>
+  )
+)
 ```
@@ -150,0 +180,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

90330

increased by1.08%

Lines of code

1423

increased by0.85%

Number of lines in readme file

189

increased by18.87%

Dependency changes

• Updatedresize-observer-polyfill@^1.5.0