@reach/rect - npm Package Compare versions

Comparing version 0.4.0-beta.0 to 0.4.0

index.d.ts

+declare module "@reach/rect" {
+  import * as React from "react";
+
+  export type RectProps = {
+    observe?: boolean;
+    onChange?: (rect: DOMRect) => void;
+    children?(args: { rect: DOMRect; ref: React.Ref<any> }): React.ReactNode;
+  };
+
+  declare const Rect: React.FunctionComponent<RectProps>;
+
+  export function useRect(ref: React.Ref<any>, isSelected?: boolean): DOMRect;
+
+  export default Rect;
+}

es/index.js

@@ -1,16 +0,13 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useRef, useState, useLayoutEffect } from "react";
-import Component from "@reach/component-component";
 import observeRect from "@reach/observe-rect";
 import { func, bool } from "prop-types";
 
-var render = function render(_ref) {
-  var refs = _ref.refs,
-      children = _ref.props.children,
-      rect = _ref.state.rect;
+var Rect = function Rect(_ref) {
+  var onChange = _ref.onChange,
+      observe = _ref.observe,
+      children = _ref.children;
+  var ref = React.useRef(null);
+  var rect = useRect(ref, observe, onChange);
   return children({
-    ref: function ref(node) {
-      return refs.node = node;
-    },
+    ref: ref,
     rect: rect
@@ -20,57 +17,2 @@ });
 
-var didMount = function didMount(_ref2) {
-  var setState = _ref2.setState,
-      refs = _ref2.refs,
-      props = _ref2.props;
-
-  if (!refs.node) {
-    console.warn("You need to place the ref");
-    return;
-  }
-
-  refs.observer = observeRect(refs.node, function (rect) {
-    props.onChange && props.onChange(rect);
-    setState({
-      rect: rect
-    });
-  });
-
-  if (props.observe) {
-    refs.observer.observe();
-  }
-};
-
-var didUpdate = function didUpdate(_ref3) {
-  var refs = _ref3.refs,
-      props = _ref3.props,
-      prevProps = _ref3.prevProps;
-
-  if (props.observe && !prevProps.observe) {
-    refs.observer.observe();
-  } else if (!props.observe && prevProps.observe) {
-    refs.observer.unobserve();
-  }
-};
-
-var willUnmount = function willUnmount(_ref4) {
-  var refs = _ref4.refs;
-  refs.observer.unobserve();
-};
-
-var Rect = function Rect(props) {
-  return React.createElement(Component, _extends({}, props, {
-    refs: {
-      node: undefined,
-      observer: undefined
-    },
-    initialState: {
-      rect: undefined
-    },
-    didMount: didMount,
-    didUpdate: didUpdate,
-    willUnmount: willUnmount,
-    render: render
-  }));
-};
-
 Rect.defaultProps = {
@@ -88,3 +30,3 @@ observe: true
 
-export function useRect(nodeRef, observe) {
+export function useRect(nodeRef, observe, onChange) {
   if (observe === void 0) {
@@ -100,16 +42,23 @@ observe = true;
   useLayoutEffect(function () {
-    if (!observerRef.current && nodeRef.current) {
-      observerRef.current = observeRect(nodeRef.current, setRect);
+    var cleanup = function cleanup() {
+      observerRef.current && observerRef.current.unobserve();
+    };
+
+    if (!nodeRef.current) {
+      console.warn("You need to place the ref");
+      return cleanup;
     }
 
-    if (observe) {
-      observerRef.current.observe();
+    if (!observerRef.current && nodeRef.current) {
+      observerRef.current = observeRect(nodeRef.current, function (rect) {
+        onChange && onChange(rect);
+        setRect(rect);
+      });
     }
 
-    return function () {
-      return observerRef.current.unobserve();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observe]);
+    observe && observerRef.current.observe();
+    return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [observe, onChange]);
   return rect;
 }
 export default Rect;

index.js

@@ -9,4 +9,2 @@ "use strict";
 
-var _componentComponent = _interopRequireDefault(require("@reach/component-component"));
-
 var _observeRect = _interopRequireDefault(require("@reach/observe-rect"));
@@ -22,12 +20,12 @@
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var Rect = function Rect(_ref) {
+  var onChange = _ref.onChange,
+      observe = _ref.observe,
+      children = _ref.children;
 
-var render = function render(_ref) {
-  var refs = _ref.refs,
-      children = _ref.props.children,
-      rect = _ref.state.rect;
+  var ref = _react["default"].useRef(null);
+
+  var rect = useRect(ref, observe, onChange);
   return children({
-    ref: function ref(node) {
-      return refs.node = node;
-    },
+    ref: ref,
     rect: rect
@@ -37,57 +35,2 @@ });
 
-var didMount = function didMount(_ref2) {
-  var setState = _ref2.setState,
-      refs = _ref2.refs,
-      props = _ref2.props;
-
-  if (!refs.node) {
-    console.warn("You need to place the ref");
-    return;
-  }
-
-  refs.observer = (0, _observeRect["default"])(refs.node, function (rect) {
-    props.onChange && props.onChange(rect);
-    setState({
-      rect: rect
-    });
-  });
-
-  if (props.observe) {
-    refs.observer.observe();
-  }
-};
-
-var didUpdate = function didUpdate(_ref3) {
-  var refs = _ref3.refs,
-      props = _ref3.props,
-      prevProps = _ref3.prevProps;
-
-  if (props.observe && !prevProps.observe) {
-    refs.observer.observe();
-  } else if (!props.observe && prevProps.observe) {
-    refs.observer.unobserve();
-  }
-};
-
-var willUnmount = function willUnmount(_ref4) {
-  var refs = _ref4.refs;
-  refs.observer.unobserve();
-};
-
-var Rect = function Rect(props) {
-  return _react["default"].createElement(_componentComponent["default"], _extends({}, props, {
-    refs: {
-      node: undefined,
-      observer: undefined
-    },
-    initialState: {
-      rect: undefined
-    },
-    didMount: didMount,
-    didUpdate: didUpdate,
-    willUnmount: willUnmount,
-    render: render
-  }));
-};
-
 Rect.defaultProps = {
@@ -105,3 +48,3 @@ observe: true
 
-function useRect(nodeRef, observe) {
+function useRect(nodeRef, observe, onChange) {
   if (observe === void 0) {
@@ -117,14 +60,21 @@ observe = true;
   (0, _react.useLayoutEffect)(function () {
-    if (!observerRef.current && nodeRef.current) {
-      observerRef.current = (0, _observeRect["default"])(nodeRef.current, setRect);
+    var cleanup = function cleanup() {
+      observerRef.current && observerRef.current.unobserve();
+    };
+
+    if (!nodeRef.current) {
+      console.warn("You need to place the ref");
+      return cleanup;
     }
 
-    if (observe) {
-      observerRef.current.observe();
+    if (!observerRef.current && nodeRef.current) {
+      observerRef.current = (0, _observeRect["default"])(nodeRef.current, function (rect) {
+        onChange && onChange(rect);
+        setRect(rect);
+      });
     }
 
-    return function () {
-      return observerRef.current.unobserve();
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observe]);
+    observe && observerRef.current.observe();
+    return cleanup; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [observe, onChange]);
   return rect;
@@ -131,0 +81,0 @@ }

package.json

 {
   "name": "@reach/rect",
-  "version": "0.4.0-beta.0",
+  "version": "0.4.0",
   "description": "Measure React elements position in the DOM",
@@ -8,7 +8,5 @@ "main": "index.js",
   "scripts": {
-    "build": "node ../../shared/build-package",
-    "lint": "eslint . --max-warnings=0"
+    "build": "node ../../shared/build-package"
   },
   "dependencies": {
-    "@reach/component-component": "^0.4.0-beta.0",
     "@reach/observe-rect": "^1.0.3",
@@ -21,3 +19,3 @@ "prop-types": "^15.7.2"
   },
-  "author": "Ryan Florence <@ryanflorence>",
+  "author": "React Training <[e-mail]>",
   "license": "MIT",
@@ -29,5 +27,6 @@ "files": [
     "index.js",
+    "index.d.ts",
     "styles.css"
   ],
-  "gitHead": "f8b2458e7f6d77300a65c2e02b75a5a1a41713a1"
+  "gitHead": "0f3d2c7e530cd80e1d1bd338182ac89a3ba23999"
 }

src/index.js

 import React, { useRef, useState, useLayoutEffect } from "react";
-import Component from "@reach/component-component";
 import observeRect from "@reach/observe-rect";
 import { func, bool } from "prop-types";
 
-let render = ({ refs, props: { children }, state: { rect } }) =>
-  children({ ref: node => (refs.node = node), rect });
-
-let didMount = ({ setState, refs, props }) => {
-  if (!refs.node) {
-    console.warn("You need to place the ref");
-    return;
-  }
-  refs.observer = observeRect(refs.node, rect => {
-    props.onChange && props.onChange(rect);
-    setState({ rect });
-  });
-  if (props.observe) {
-    refs.observer.observe();
-  }
+let Rect = ({ onChange, observe, children }) => {
+  const ref = React.useRef(null);
+  const rect = useRect(ref, observe, onChange);
+  return children({ ref, rect });
 };
 
-let didUpdate = ({ refs, props, prevProps }) => {
-  if (props.observe && !prevProps.observe) {
-    refs.observer.observe();
-  } else if (!props.observe && prevProps.observe) {
-    refs.observer.unobserve();
-  }
-};
-
-let willUnmount = ({ refs }) => {
-  refs.observer.unobserve();
-};
-
-let Rect = props => (
-  <Component
-    {...props}
-    refs={{
-      node: undefined,
-      observer: undefined
-    }}
-    initialState={{
-      rect: undefined
-    }}
-    didMount={didMount}
-    didUpdate={didUpdate}
-    willUnmount={willUnmount}
-    render={render}
-  />
-);
-
 Rect.defaultProps = {
@@ -64,15 +23,26 @@ observe: true
 
-export function useRect(nodeRef, observe = true) {
+export function useRect(nodeRef, observe = true, onChange) {
   let [rect, setRect] = useState(null);
   let observerRef = useRef(null);
   useLayoutEffect(() => {
+    const cleanup = () => {
+      observerRef.current && observerRef.current.unobserve();
+    };
+
+    if (!nodeRef.current) {
+      console.warn("You need to place the ref");
+      return cleanup;
+    }
+
     if (!observerRef.current && nodeRef.current) {
-      observerRef.current = observeRect(nodeRef.current, setRect);
+      observerRef.current = observeRect(nodeRef.current, rect => {
+        onChange && onChange(rect);
+        setRect(rect);
+      });
     }
-    if (observe) {
-      observerRef.current.observe();
-    }
-    return () => observerRef.current.unobserve();
+
+    observe && observerRef.current.observe();
+    return cleanup;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [observe]);
+  }, [observe, onChange]);
   return rect;
@@ -79,0 +49,0 @@ }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

-20%

Number of package files

6

20%

Worsened metrics

Total package byte prevSize

7489

-27.83%

Lines of code

165

-39.11%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  @reach/component-component@^0.4.0-beta.0

• - Removed

  @reach/component-component@0.4.0
  (transitive)