react-measure - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

CHANGELOG.md

 ## CHANGELOG
 
+### 2.2.3
+
+Fix not passing `ResizeObserver` `entries` to `measure` method #125
+
+Add support for `createRef` #126
+
 ### 2.2.2
@@ -4,0 +10,0 @@

dist/index.cjs.js

@@ -108,5 +108,4 @@ 'use strict';
         _this._animationFrameID = null;
-        _this._resizeObserver = new ResizeObserver(function () {
-          _this.measure();
-        });
+        _this._resizeObserver = null;
+        _this._node = null;
 
@@ -121,3 +120,3 @@ _this.measure = function (entries) {
           _this._animationFrameID = window.requestAnimationFrame(function () {
-            if (_this._resizeObserver) {
+            if (_this._resizeObserver !== null) {
               _this.setState({
@@ -135,4 +134,4 @@ contentRect: contentRect
         _this._handleRef = function (node) {
-          if (_this._resizeObserver) {
-            if (node) {
+          if (_this._resizeObserver !== null) {
+            if (node !== null) {
               _this._resizeObserver.observe(node);
@@ -145,5 +144,10 @@ } else {
           _this._node = node;
+          var innerRef = _this.props.innerRef;
 
-          if (typeof _this.props.innerRef === 'function') {
-            _this.props.innerRef(node);
+          if (innerRef) {
+            if (typeof innerRef === 'function') {
+              innerRef(node);
+            } else {
+              innerRef.current = node;
+            }
           }
@@ -157,4 +161,12 @@ };
 
+      _proto.componentDidMount = function componentDidMount() {
+        this._resizeObserver = new ResizeObserver(this.measure);
+
+        if (this._node !== null) {
+          this._resizeObserver.observe(this._node);
+        }
+      };
+
       _proto.componentWillUnmount = function componentWillUnmount() {
-        if (this._resizeObserver) {
+        if (this._resizeObserver !== null) {
           this._resizeObserver.disconnect();
@@ -188,3 +200,3 @@
       margin: PropTypes.bool,
-      innerRef: PropTypes.func,
+      innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
       onResize: PropTypes.func
@@ -191,0 +203,0 @@ }, _temp;

dist/index.esm.js

@@ -102,5 +102,4 @@ import _extends from '@babel/runtime/helpers/esm/extends';
         _this._animationFrameID = null;
-        _this._resizeObserver = new ResizeObserver(function () {
-          _this.measure();
-        });
+        _this._resizeObserver = null;
+        _this._node = null;
 
@@ -115,3 +114,3 @@ _this.measure = function (entries) {
           _this._animationFrameID = window.requestAnimationFrame(function () {
-            if (_this._resizeObserver) {
+            if (_this._resizeObserver !== null) {
               _this.setState({
@@ -129,4 +128,4 @@ contentRect: contentRect
         _this._handleRef = function (node) {
-          if (_this._resizeObserver) {
-            if (node) {
+          if (_this._resizeObserver !== null) {
+            if (node !== null) {
               _this._resizeObserver.observe(node);
@@ -139,5 +138,10 @@ } else {
           _this._node = node;
+          var innerRef = _this.props.innerRef;
 
-          if (typeof _this.props.innerRef === 'function') {
-            _this.props.innerRef(node);
+          if (innerRef) {
+            if (typeof innerRef === 'function') {
+              innerRef(node);
+            } else {
+              innerRef.current = node;
+            }
           }
@@ -151,4 +155,12 @@ };
 
+      _proto.componentDidMount = function componentDidMount() {
+        this._resizeObserver = new ResizeObserver(this.measure);
+
+        if (this._node !== null) {
+          this._resizeObserver.observe(this._node);
+        }
+      };
+
       _proto.componentWillUnmount = function componentWillUnmount() {
-        if (this._resizeObserver) {
+        if (this._resizeObserver !== null) {
           this._resizeObserver.disconnect();
@@ -182,3 +194,3 @@
       margin: PropTypes.bool,
-      innerRef: PropTypes.func,
+      innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
       onResize: PropTypes.func
@@ -185,0 +197,0 @@ }, _temp;

dist/index.umd.js

@@ -1165,5 +1165,4 @@ (function (global, factory) {
           _this._animationFrameID = null;
-          _this._resizeObserver = new index(function () {
-            _this.measure();
-          });
+          _this._resizeObserver = null;
+          _this._node = null;
 
@@ -1178,3 +1177,3 @@ _this.measure = function (entries) {
             _this._animationFrameID = window.requestAnimationFrame(function () {
-              if (_this._resizeObserver) {
+              if (_this._resizeObserver !== null) {
                 _this.setState({
@@ -1192,4 +1191,4 @@ contentRect: contentRect
           _this._handleRef = function (node) {
-            if (_this._resizeObserver) {
-              if (node) {
+            if (_this._resizeObserver !== null) {
+              if (node !== null) {
                 _this._resizeObserver.observe(node);
@@ -1202,5 +1201,10 @@ } else {
             _this._node = node;
+            var innerRef = _this.props.innerRef;
 
-            if (typeof _this.props.innerRef === 'function') {
-              _this.props.innerRef(node);
+            if (innerRef) {
+              if (typeof innerRef === 'function') {
+                innerRef(node);
+              } else {
+                innerRef.current = node;
+              }
             }
@@ -1214,4 +1218,12 @@ };
 
+        _proto.componentDidMount = function componentDidMount() {
+          this._resizeObserver = new index(this.measure);
+
+          if (this._node !== null) {
+            this._resizeObserver.observe(this._node);
+          }
+        };
+
         _proto.componentWillUnmount = function componentWillUnmount() {
-          if (this._resizeObserver) {
+          if (this._resizeObserver !== null) {
             this._resizeObserver.disconnect();
@@ -1245,3 +1257,3 @@
         margin: PropTypes.bool,
-        innerRef: PropTypes.func,
+        innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
         onResize: PropTypes.func
@@ -1248,0 +1260,0 @@ }, _temp;

package.json

 {
   "name": "react-measure",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Compute measurements of React components.",
@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

README.md

@@ -21,4 +21,4 @@ ## 📏 React Measure
 ```html
-<script src="https://unpkg.com/react-measure/dist/react-measure.js"></script>
-(UMD library exposed as `Measure`)
+<script src="https://unpkg.com/react-measure/dist/index.umd.js"></script>
+(UMD library exposed as `ReactMeasure`)
 ```
@@ -25,0 +25,0 @@

src/with-content-rect.js

@@ -17,3 +17,3 @@ import { Component, createElement } from 'react'
         margin: PropTypes.bool,
-        innerRef: PropTypes.func,
+        innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
         onResize: PropTypes.func,
@@ -35,8 +35,15 @@ }
 
-      _resizeObserver = new ResizeObserver(() => {
-        this.measure()
-      })
+      _resizeObserver = null
 
+      _node = null
+
+      componentDidMount() {
+        this._resizeObserver = new ResizeObserver(this.measure)
+        if (this._node !== null) {
+          this._resizeObserver.observe(this._node)
+        }
+      }
+
       componentWillUnmount() {
-        if (this._resizeObserver) {
+        if (this._resizeObserver !== null) {
           this._resizeObserver.disconnect()
@@ -59,3 +66,3 @@ this._resizeObserver = null
         this._animationFrameID = window.requestAnimationFrame(() => {
-          if (this._resizeObserver) {
+          if (this._resizeObserver !== null) {
             this.setState({ contentRect })
@@ -71,4 +78,4 @@ }
       _handleRef = node => {
-        if (this._resizeObserver) {
-          if (node) {
+        if (this._resizeObserver !== null) {
+          if (node !== null) {
             this._resizeObserver.observe(node)
@@ -82,4 +89,9 @@ } else {
 
-        if (typeof this.props.innerRef === 'function') {
-          this.props.innerRef(node)
+        const { innerRef } = this.props
+        if (innerRef) {
+          if (typeof innerRef === 'function') {
+            innerRef(node);
+          } else {
+            innerRef.current = node;
+          }
         }
@@ -86,0 +98,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

70286

increased by2.48%

Lines of code

1583

increased by2.59%

No dependency changes