react-measure - npm Package Compare versions

Comparing version 2.2.5 to 2.2.6

CHANGELOG.md

 ## CHANGELOG
 
+### 2.2.6
+
+Fix initial `onResize` delay caused by `requestAnimationFrame` [#135](https://github.com/souporserious/react-measure/pull/135)
+
 ### 2.2.5
@@ -4,0 +8,0 @@

dist/index.cjs.js

@@ -110,2 +110,3 @@ 'use strict';
         _this._node = null;
+        _this._firstResize = true;
 
@@ -120,3 +121,3 @@ _this.measure = function (entries) {
           _this._animationFrameID = window.requestAnimationFrame(function () {
-            if (_this._resizeObserver !== null) {
+            if (_this._resizeObserver !== null && !_this._firstResize) {
               _this.setState({
@@ -130,2 +131,4 @@ contentRect: contentRect
             }
+
+            _this._firstResize = false;
           });
@@ -166,2 +169,6 @@ };
           this._resizeObserver.observe(this._node);
+
+          if (typeof this.props.onResize === 'function') {
+            this.props.onResize(getContentRect(this._node, types || getTypes(this.props)));
+          }
         }
@@ -168,0 +175,0 @@ };

dist/index.esm.js

@@ -104,2 +104,3 @@ import _extends from '@babel/runtime/helpers/esm/extends';
         _this._node = null;
+        _this._firstResize = true;
 
@@ -114,3 +115,3 @@ _this.measure = function (entries) {
           _this._animationFrameID = window.requestAnimationFrame(function () {
-            if (_this._resizeObserver !== null) {
+            if (_this._resizeObserver !== null && !_this._firstResize) {
               _this.setState({
@@ -124,2 +125,4 @@ contentRect: contentRect
             }
+
+            _this._firstResize = false;
           });
@@ -160,2 +163,6 @@ };
           this._resizeObserver.observe(this._node);
+
+          if (typeof this.props.onResize === 'function') {
+            this.props.onResize(getContentRect(this._node, types || getTypes(this.props)));
+          }
         }
@@ -162,0 +169,0 @@ };

dist/index.umd.js

@@ -1071,2 +1071,3 @@ (function (global, factory) {
           _this._node = null;
+          _this._firstResize = true;
 
@@ -1081,3 +1082,3 @@ _this.measure = function (entries) {
             _this._animationFrameID = window.requestAnimationFrame(function () {
-              if (_this._resizeObserver !== null) {
+              if (_this._resizeObserver !== null && !_this._firstResize) {
                 _this.setState({
@@ -1091,2 +1092,4 @@ contentRect: contentRect
               }
+
+              _this._firstResize = false;
             });
@@ -1127,2 +1130,6 @@ };
             this._resizeObserver.observe(this._node);
+
+            if (typeof this.props.onResize === 'function') {
+              this.props.onResize(getContentRect$1(this._node, types || getTypes(this.props)));
+            }
           }
@@ -1129,0 +1136,0 @@ };

package.json

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

README.md

@@ -194,2 +194,2 @@ ## 📏 React Measure
 
-`gatsby develop`
+`yarn gatsby develop`

src/__tests__/Measure.test.js

@@ -35,3 +35,3 @@ import React, { createRef } from 'react'
 
-  it('should handel entry', () => {
+  it('should handle entry', () => {
     const ref = createRef()
@@ -46,7 +46,7 @@ render(<MeasureWith innerRef={ref} />, container)
 
-    expect(defaultChildrenFn).toHaveBeenCalledTimes(2)
+    expect(defaultChildrenFn).toHaveBeenCalledTimes(1)
     expect(container.firstChild).toMatchSnapshot()
   })
 
-  it('should handel bounds', () => {
+  it('should handle bounds', () => {
     render(<MeasureWith bounds />, container)
@@ -58,3 +58,3 @@ expect(container.firstChild).toMatchSnapshot()
 
-    expect(defaultChildrenFn).toHaveBeenCalledTimes(2)
+    expect(defaultChildrenFn).toHaveBeenCalledTimes(1)
     expect(container.firstChild).toMatchSnapshot()
@@ -68,3 +68,3 @@ })
     })
-    it('should always un observer before observing next one', () => {
+    it('should always unobserve before observing next one', () => {
       const ref = createRef()
@@ -96,2 +96,7 @@
     })
+    it('should trigger onResize when componentDidMount is called', () => {
+      const onResize = jest.fn()
+      render(<MeasureWith onResize={onResize} />, container)
+      expect(onResize).toHaveBeenCalledTimes(1)
+    })
     it('should trigger onResize when resizeObserver callback is called', () => {
@@ -98,0 +103,0 @@ const onResize = jest.fn()

src/with-content-rect.js

@@ -38,2 +38,4 @@ import { Component, createElement } from 'react'
 
+      _firstResize = true
+
       componentDidMount() {
@@ -43,2 +45,8 @@ this._resizeObserver = new ResizeObserver(this.measure)
           this._resizeObserver.observe(this._node)
+
+          if (typeof this.props.onResize === 'function') {
+            this.props.onResize(
+              getContentRect(this._node, types || getTypes(this.props))
+            )
+          }
         }
@@ -66,3 +74,3 @@ }
         this._animationFrameID = window.requestAnimationFrame(() => {
-          if (this._resizeObserver !== null) {
+          if (this._resizeObserver !== null && !this._firstResize) {
             this.setState({ contentRect })
@@ -73,2 +81,3 @@ if (typeof this.props.onResize === 'function') {
           }
+          this._firstResize = false
         })
@@ -75,0 +84,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

80546

increased by1.86%

Lines of code

1750

increased by1.57%

No dependency changes