@reach/rect - npm Package Compare versions

Comparing version 0.10.4 to 0.10.5

dist/index.d.ts

@@ -54,3 +54,3 @@ /**
         rect: PRect | null;
-        ref: React.Ref<any>;
+        ref: React.RefObject<any>;
     }): JSX.Element;
@@ -65,5 +65,4 @@ };
  */
-export declare function useRect<T extends HTMLElement = HTMLElement>(nodeRef: React.RefObject<T>, observe?: boolean, onChange?: (rect: DOMRect) => void): null | DOMRect;
+export declare function useRect<T extends Element = HTMLElement>(nodeRef: React.RefObject<T | undefined | null>, observe?: boolean, onChange?: (rect: DOMRect) => void): null | DOMRect;
 export default Rect;
-export declare type PartialRect = Partial<PRect>;
 export declare type PRect = Partial<DOMRect> & {
@@ -70,0 +69,0 @@ readonly bottom: number;

dist/rect.cjs.development.js

@@ -64,34 +64,58 @@ 'use strict';
 
-  var initialRectSet = react.useRef(false);
+  var _useState = react.useState(nodeRef.current),
+      element = _useState[0],
+      setElement = _useState[1];
 
-  var _useState = react.useState(null),
-      rect = _useState[0],
-      setRect = _useState[1];
+  var initialRectIsSet = react.useRef(false);
+  var initialRefIsSet = react.useRef(false);
 
-  var observerRef = react.useRef(null);
+  var _useState2 = react.useState(null),
+      rect = _useState2[0],
+      setRect = _useState2[1];
+
+  var onChangeRef = react.useRef();
   utils.useIsomorphicLayoutEffect(function () {
-    var cleanup = function cleanup() {
-      observerRef.current && observerRef.current.unobserve();
-    };
+    onChangeRef.current = onChange;
 
-    if (!nodeRef.current) {
-      console.warn("You need to place the ref");
-      return cleanup;
+    if (nodeRef.current !== element) {
+      setElement(nodeRef.current);
     }
+  });
+  utils.useIsomorphicLayoutEffect(function () {
+    if (element && !initialRectIsSet.current) {
+      initialRectIsSet.current = true;
+      setRect(element.getBoundingClientRect());
+    }
+  }, [element]);
+  utils.useIsomorphicLayoutEffect(function () {
+    var observer;
+    var elem = element; // State initializes before refs are placed, meaning the element state will
+    // be undefined on the first render. We still want the rect on the first
+    // render, so initially we'll use the nodeRef that was passed instead of
+    // state for our measurements.
 
-    if (!observerRef.current) {
-      observerRef.current = observeRect(nodeRef.current, function (rect) {
-        onChange && onChange(rect);
-        setRect(rect);
-      });
+    if (!initialRefIsSet.current) {
+      initialRefIsSet.current = true;
+      elem = nodeRef.current;
     }
 
-    if (!initialRectSet.current) {
-      initialRectSet.current = true;
-      setRect(nodeRef.current.getBoundingClientRect());
+    if (!elem) {
+      {
+        console.warn("You need to place the ref");
+      }
+
+      return cleanup;
     }
 
-    observe && observerRef.current.observe();
-    return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observe, onChange]);
+    observer = observeRect(elem, function (rect) {
+      onChangeRef.current && onChangeRef.current(rect);
+      setRect(rect);
+    });
+    observe && observer.observe();
+    return cleanup;
+
+    function cleanup() {
+      observer && observer.unobserve();
+    }
+  }, [observe, element]);
   return rect;
@@ -98,0 +122,0 @@ }

dist/rect.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("prop-types");var r,t=(r=require("@reach/observe-rect"))&&"object"==typeof r&&"default"in r?r.default:r,u=require("@reach/utils"),n=function(r){var t=r.onChange,u=r.observe,n=void 0===u||u,o=r.children,s=e.useRef(null);return o({ref:s,rect:c(s,n,t)})};function c(r,n,c){void 0===n&&(n=!0);var o=e.useRef(!1),s=e.useState(null),i=s[0],a=s[1],f=e.useRef(null);return u.useIsomorphicLayoutEffect((function(){var e=function(){f.current&&f.current.unobserve()};return r.current?(f.current||(f.current=t(r.current,(function(e){c&&c(e),a(e)}))),o.current||(o.current=!0,a(r.current.getBoundingClientRect())),n&&f.current.observe(),e):(console.warn("You need to place the ref"),e)}),[n,c]),i}exports.Rect=n,exports.default=n,exports.useRect=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("prop-types");var r,t=(r=require("@reach/observe-rect"))&&"object"==typeof r&&"default"in r?r.default:r,u=require("@reach/utils"),n=function(r){var t=r.onChange,u=r.observe,n=void 0===u||u,o=r.children,s=e.useRef(null);return o({ref:s,rect:c(s,n,t)})};function c(r,n,c){void 0===n&&(n=!0);var o=e.useState(r.current),s=o[0],f=o[1],i=e.useRef(!1),a=e.useRef(!1),l=e.useState(null),p=l[0],v=l[1],d=e.useRef();return u.useIsomorphicLayoutEffect((function(){d.current=c,r.current!==s&&f(r.current)})),u.useIsomorphicLayoutEffect((function(){s&&!i.current&&(i.current=!0,v(s.getBoundingClientRect()))}),[s]),u.useIsomorphicLayoutEffect((function(){var e,u=s;return a.current||(a.current=!0,u=r.current),u?(e=t(u,(function(e){d.current&&d.current(e),v(e)})),n&&e.observe(),c):c;function c(){e&&e.unobserve()}}),[n,s]),p}exports.Rect=n,exports.default=n,exports.useRect=c;
 //# sourceMappingURL=rect.cjs.production.min.js.map

dist/rect.esm.js

@@ -58,34 +58,58 @@ import { useRef, useState } from 'react';
 
-  var initialRectSet = useRef(false);
+  var _useState = useState(nodeRef.current),
+      element = _useState[0],
+      setElement = _useState[1];
 
-  var _useState = useState(null),
-      rect = _useState[0],
-      setRect = _useState[1];
+  var initialRectIsSet = useRef(false);
+  var initialRefIsSet = useRef(false);
 
-  var observerRef = useRef(null);
+  var _useState2 = useState(null),
+      rect = _useState2[0],
+      setRect = _useState2[1];
+
+  var onChangeRef = useRef();
   useIsomorphicLayoutEffect(function () {
-    var cleanup = function cleanup() {
-      observerRef.current && observerRef.current.unobserve();
-    };
+    onChangeRef.current = onChange;
 
-    if (!nodeRef.current) {
-      console.warn("You need to place the ref");
-      return cleanup;
+    if (nodeRef.current !== element) {
+      setElement(nodeRef.current);
     }
+  });
+  useIsomorphicLayoutEffect(function () {
+    if (element && !initialRectIsSet.current) {
+      initialRectIsSet.current = true;
+      setRect(element.getBoundingClientRect());
+    }
+  }, [element]);
+  useIsomorphicLayoutEffect(function () {
+    var observer;
+    var elem = element; // State initializes before refs are placed, meaning the element state will
+    // be undefined on the first render. We still want the rect on the first
+    // render, so initially we'll use the nodeRef that was passed instead of
+    // state for our measurements.
 
-    if (!observerRef.current) {
-      observerRef.current = observeRect(nodeRef.current, function (rect) {
-        onChange && onChange(rect);
-        setRect(rect);
-      });
+    if (!initialRefIsSet.current) {
+      initialRefIsSet.current = true;
+      elem = nodeRef.current;
     }
 
-    if (!initialRectSet.current) {
-      initialRectSet.current = true;
-      setRect(nodeRef.current.getBoundingClientRect());
+    if (!elem) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("You need to place the ref");
+      }
+
+      return cleanup;
     }
 
-    observe && observerRef.current.observe();
-    return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observe, onChange]);
+    observer = observeRect(elem, function (rect) {
+      onChangeRef.current && onChangeRef.current(rect);
+      setRect(rect);
+    });
+    observe && observer.observe();
+    return cleanup;
+
+    function cleanup() {
+      observer && observer.unobserve();
+    }
+  }, [observe, element]);
   return rect;
@@ -92,0 +116,0 @@ }

package.json

 {
   "name": "@reach/rect",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Measure React elements position in the DOM",
@@ -16,4 +16,4 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/observe-rect": "1.1.0",
-    "@reach/utils": "0.10.4",
+    "@reach/observe-rect": "1.2.0",
+    "@reach/utils": "0.10.5",
     "prop-types": "^15.7.2",
@@ -33,3 +33,3 @@ "tslib": "^2.0.0"
   ],
-  "gitHead": "a0c7b3672835b2a9f84732663bb0e78992541211"
+  "gitHead": "86a046f54d53b6420e392b3fa56dd991d9d4e458"
 }

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

32791

increased by16.35%

Lines of code

289

increased by16.53%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

Dependency changes

• + Added@reach/observe-rect@1.2.0(transitive)

• + Added@reach/utils@0.10.5(transitive)

• - Removed@reach/observe-rect@1.1.0(transitive)

• - Removed@reach/utils@0.10.4(transitive)

• Updated@reach/observe-rect@1.2.0

• Updated@reach/utils@0.10.5