@reach/rect - npm Package Compare versions

Comparing version 0.11.2 to 0.12.0

dist/index.d.ts

@@ -10,3 +10,3 @@ /**
  */
-import React from "react";
+import * as React from "react";
 /**
@@ -17,8 +17,29 @@ * Rect
  */
-export declare const Rect: React.FC<RectProps>;
+declare const Rect: React.FC<RectProps>;
 /**
  * @see Docs https://reach.tech/rect#rect-props
  */
-export declare type RectProps = {
+declare type RectProps = UseRectOptions & {
     /**
+     * A function that calls back to you with a `ref` to place on an element and
+     * the `rect` measurements of the dom node.
+     *
+     * **Note**: On the first render `rect` will be `undefined` because we can't
+     * measure a node that has not yet been rendered. Make sure your code accounts
+     * for this.
+     *
+     * @see Docs https://reach.tech/rect#rect-onchange
+     */
+    children(args: {
+        rect: PRect | null;
+        ref: React.RefObject<any>;
+    }): JSX.Element;
+};
+declare function useRect<T extends Element = HTMLElement>(nodeRef: React.RefObject<T | undefined | null>, options?: UseRectOptions): null | DOMRect;
+declare function useRect<T extends Element = HTMLElement>(nodeRef: React.RefObject<T | undefined | null>, observe?: UseRectOptions["observe"], onChange?: UseRectOptions["onChange"]): null | DOMRect;
+/**
+ * @see Docs https://reach.tech/rect#userect
+ */
+declare type UseRectOptions = {
+    /**
      * Tells `Rect` to observe the position of the node or not. While observing,
@@ -35,3 +56,3 @@ * the `children` render prop may call back very quickly (especially while
      *
-     * @see Docs https://reach.tech/rect#rect-observe
+     * @see Docs https://reach.tech/rect#userect-observe
      */
@@ -42,30 +63,7 @@ observe?: boolean;
      *
-     * @see Docs https://reach.tech/rect#rect-onchange
+     * @see Docs https://reach.tech/rect#userect-onchange
      */
     onChange?: (rect: PRect) => void;
-    /**
-     * A function that calls back to you with a `ref` to place on an element and
-     * the `rect` measurements of the dom node.
-     *
-     * **Note**: On the first render `rect` will be `undefined` because we can't
-     * measure a node that has not yet been rendered. Make sure your code accounts
-     * for this.
-     *
-     * @see Docs https://reach.tech/rect#rect-onchange
-     */
-    children(args: {
-        rect: PRect | null;
-        ref: React.RefObject<any>;
-    }): JSX.Element;
 };
-/**
- * useRect
- *
- * @param nodeRef
- * @param observe
- * @param onChange
- */
-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 PRect = Partial<DOMRect> & {
+declare type PRect = Partial<DOMRect> & {
     readonly bottom: number;
@@ -78,1 +76,4 @@ readonly height: number;
 };
+export default Rect;
+export type { PRect, UseRectOptions, RectProps };
+export { Rect, useRect };

dist/rect.cjs.development.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var react = require('react');
+var React = require('react');
 var PropTypes = require('prop-types');
@@ -37,4 +37,7 @@ var observeRect = require('@reach/observe-rect');
       children = _ref.children;
-  var ref = react.useRef(null);
-  var rect = useRect(ref, observe, onChange);
+  var ref = React.useRef(null);
+  var rect = useRect(ref, {
+    observe: observe,
+    onChange: onChange
+  });
   return children({
@@ -53,4 +56,3 @@ ref: ref,
   };
-} ////////////////////////////////////////////////////////////////////////////////
-
+}
 /**
@@ -65,19 +67,46 @@ * useRect
 
-function useRect(nodeRef, observe, onChange) {
-  if (observe === void 0) {
-    observe = true;
+function useRect(nodeRef, observeOrOptions, deprecated_onChange) {
+  var observe;
+  var onChange;
+
+  if (utils.isBoolean(observeOrOptions)) {
+    observe = observeOrOptions;
+  } else {
+    var _observeOrOptions$obs;
+
+    observe = (_observeOrOptions$obs = observeOrOptions === null || observeOrOptions === void 0 ? void 0 : observeOrOptions.observe) !== null && _observeOrOptions$obs !== void 0 ? _observeOrOptions$obs : true;
+    onChange = observeOrOptions === null || observeOrOptions === void 0 ? void 0 : observeOrOptions.onChange;
   }
 
-  var _useState = react.useState(nodeRef.current),
-      element = _useState[0],
-      setElement = _useState[1];
+  if (utils.isFunction(deprecated_onChange)) {
+    onChange = deprecated_onChange;
+  }
 
-  var initialRectIsSet = react.useRef(false);
-  var initialRefIsSet = react.useRef(false);
+  {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(function () {
+       utils.warning(!utils.isBoolean(observeOrOptions), "Passing `observe` as the second argument to `useRect` is deprecated and will be removed in a future version of Reach UI. Instead, you can pass an object of options with an `observe` property as the second argument (`useRect(ref, { observe })`).\n" + "See https://reach.tech/rect#userect-observe") ;
+    }, [observeOrOptions]); // eslint-disable-next-line react-hooks/rules-of-hooks
 
-  var _useState2 = react.useState(null),
-      rect = _useState2[0],
-      setRect = _useState2[1];
+    React.useEffect(function () {
+       utils.warning(!utils.isFunction(deprecated_onChange), "Passing `onChange` as the third argument to `useRect` is deprecated and will be removed in a future version of Reach UI. Instead, you can pass an object of options with an `onChange` property as the second argument (`useRect(ref, { onChange })`).\n" + "See https://reach.tech/rect#userect-onchange") ;
+    }, [deprecated_onChange]);
+  }
 
-  var onChangeRef = react.useRef();
+  var _React$useState = React.useState(nodeRef.current),
+      element = _React$useState[0],
+      setElement = _React$useState[1];
+
+  var initialRectIsSet = React.useRef(false);
+  var initialRefIsSet = React.useRef(false);
+
+  var _React$useState2 = React.useState(null),
+      rect = _React$useState2[0],
+      setRect = _React$useState2[1];
+
+  var onChangeRef = React.useRef(onChange);
+  var stableOnChange = React.useCallback(function (rect) {
+    onChangeRef.current && onChangeRef.current(rect);
+  }, []); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   utils.useIsomorphicLayoutEffect(function () {
@@ -117,3 +146,3 @@ onChangeRef.current = onChange;
     observer = observeRect__default['default'](elem, function (rect) {
-      onChangeRef.current && onChangeRef.current(rect);
+      stableOnChange(rect);
       setRect(rect);
@@ -127,5 +156,5 @@ });
     }
-  }, [observe, element]);
+  }, [observe, element, nodeRef, stableOnChange]);
   return rect;
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
@@ -132,0 +161,0 @@ exports.Rect = Rect;

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=require("@reach/observe-rect"),t=require("@reach/utils");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=u(r),c=function(r){var t=r.onChange,u=r.observe,n=void 0===u||u,c=r.children,s=e.useRef(null);return c({ref:s,rect:o(s,n,t)})};function o(r,u,c){void 0===u&&(u=!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),v=l[0],p=l[1],d=e.useRef();return t.useIsomorphicLayoutEffect((function(){d.current=c,r.current!==s&&f(r.current)})),t.useIsomorphicLayoutEffect((function(){s&&!i.current&&(i.current=!0,p(s.getBoundingClientRect()))}),[s]),t.useIsomorphicLayoutEffect((function(){var e,t=s;return a.current||(a.current=!0,t=r.current),t?(e=n.default(t,(function(e){d.current&&d.current(e),p(e)})),u&&e.observe(),c):c;function c(){e&&e.unobserve()}}),[u,s]),v}exports.Rect=c,exports.default=c,exports.useRect=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");require("prop-types");var r=require("@reach/observe-rect"),t=require("@reach/utils");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=u(r),o=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,{observe:n,onChange:t})})};function c(r,u,o){var c,s,i;t.isBoolean(u)?c=u:(c=null===(i=null==u?void 0:u.observe)||void 0===i||i,s=null==u?void 0:u.onChange),t.isFunction(o)&&(s=o);var a=e.useState(r.current),f=a[0],l=a[1],v=e.useRef(!1),d=e.useRef(!1),p=e.useState(null),b=p[0],h=p[1],R=e.useRef(s),y=e.useCallback((function(e){R.current&&R.current(e)}),[]);return t.useIsomorphicLayoutEffect((function(){R.current=s,r.current!==f&&l(r.current)})),t.useIsomorphicLayoutEffect((function(){f&&!v.current&&(v.current=!0,h(f.getBoundingClientRect()))}),[f]),t.useIsomorphicLayoutEffect((function(){var e,t=f;return d.current||(d.current=!0,t=r.current),t?(e=n.default(t,(function(e){y(e),h(e)})),c&&e.observe(),u):u;function u(){e&&e.unobserve()}}),[c,f,r,y]),b}exports.Rect=o,exports.default=o,exports.useRect=c;
 //# sourceMappingURL=rect.cjs.production.min.js.map

dist/rect.esm.js

@@ -1,5 +0,5 @@
-import { useRef, useState } from 'react';
+import { useRef, useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import observeRect from '@reach/observe-rect';
-import { useIsomorphicLayoutEffect } from '@reach/utils';
+import { isBoolean, isFunction, warning, useIsomorphicLayoutEffect } from '@reach/utils';
 
@@ -28,3 +28,6 @@ /**
   var ref = useRef(null);
-  var rect = useRect(ref, observe, onChange);
+  var rect = useRect(ref, {
+    observe: observe,
+    onChange: onChange
+  });
   return children({
@@ -43,4 +46,3 @@ ref: ref,
   };
-} ////////////////////////////////////////////////////////////////////////////////
-
+}
 /**
@@ -55,19 +57,46 @@ * useRect
 
-function useRect(nodeRef, observe, onChange) {
-  if (observe === void 0) {
-    observe = true;
+function useRect(nodeRef, observeOrOptions, deprecated_onChange) {
+  var observe;
+  var onChange;
+
+  if (isBoolean(observeOrOptions)) {
+    observe = observeOrOptions;
+  } else {
+    var _observeOrOptions$obs;
+
+    observe = (_observeOrOptions$obs = observeOrOptions === null || observeOrOptions === void 0 ? void 0 : observeOrOptions.observe) !== null && _observeOrOptions$obs !== void 0 ? _observeOrOptions$obs : true;
+    onChange = observeOrOptions === null || observeOrOptions === void 0 ? void 0 : observeOrOptions.onChange;
   }
 
-  var _useState = useState(nodeRef.current),
-      element = _useState[0],
-      setElement = _useState[1];
+  if (isFunction(deprecated_onChange)) {
+    onChange = deprecated_onChange;
+  }
 
+  if (process.env.NODE_ENV !== "production") {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(function () {
+      process.env.NODE_ENV !== "production" ? warning(!isBoolean(observeOrOptions), "Passing `observe` as the second argument to `useRect` is deprecated and will be removed in a future version of Reach UI. Instead, you can pass an object of options with an `observe` property as the second argument (`useRect(ref, { observe })`).\n" + "See https://reach.tech/rect#userect-observe") : void 0;
+    }, [observeOrOptions]); // eslint-disable-next-line react-hooks/rules-of-hooks
+
+    useEffect(function () {
+      process.env.NODE_ENV !== "production" ? warning(!isFunction(deprecated_onChange), "Passing `onChange` as the third argument to `useRect` is deprecated and will be removed in a future version of Reach UI. Instead, you can pass an object of options with an `onChange` property as the second argument (`useRect(ref, { onChange })`).\n" + "See https://reach.tech/rect#userect-onchange") : void 0;
+    }, [deprecated_onChange]);
+  }
+
+  var _React$useState = useState(nodeRef.current),
+      element = _React$useState[0],
+      setElement = _React$useState[1];
+
   var initialRectIsSet = useRef(false);
   var initialRefIsSet = useRef(false);
 
-  var _useState2 = useState(null),
-      rect = _useState2[0],
-      setRect = _useState2[1];
+  var _React$useState2 = useState(null),
+      rect = _React$useState2[0],
+      setRect = _React$useState2[1];
 
-  var onChangeRef = useRef();
+  var onChangeRef = useRef(onChange);
+  var stableOnChange = useCallback(function (rect) {
+    onChangeRef.current && onChangeRef.current(rect);
+  }, []); // eslint-disable-next-line react-hooks/exhaustive-deps
+
   useIsomorphicLayoutEffect(function () {
@@ -107,3 +136,3 @@ onChangeRef.current = onChange;
     observer = observeRect(elem, function (rect) {
-      onChangeRef.current && onChangeRef.current(rect);
+      stableOnChange(rect);
       setRect(rect);
@@ -117,5 +146,5 @@ });
     }
-  }, [observe, element]);
+  }, [observe, element, nodeRef, stableOnChange]);
   return rect;
-}
+} ////////////////////////////////////////////////////////////////////////////////
 
@@ -122,0 +151,0 @@ export default Rect;

package.json

 {
   "name": "@reach/rect",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Measure React elements position in the DOM",
@@ -17,3 +17,3 @@ "author": "React Training <[e-mail]>",
     "@reach/observe-rect": "1.2.0",
-    "@reach/utils": "0.11.2",
+    "@reach/utils": "0.12.0",
     "prop-types": "^15.7.2",
@@ -33,3 +33,3 @@ "tslib": "^2.0.0"
   ],
-  "gitHead": "2aa6f03c5eed8c2b7525a29db1c69fe6bc540e5d"
+  "gitHead": "09eeccda6e4597d21545982c53db5c42beddce6b"
 }

README.md

@@ -13,3 +13,3 @@ # @reach/rect
 function Example() {
-  const ref = useRef();
+  const ref = React.useRef();
   const rect = useRect(ref);
@@ -16,0 +16,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

45629

increased by39.51%

Lines of code

345

increased by18.56%

Worsened metrics

Number of low supply chain risk alerts

6

increased by100%

Dependency changes

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

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

• Updated@reach/utils@0.12.0