add use resize observer

Author: spoeck

package-lock.json

@@ -40,7 +40,8 @@
 		"@material-ui/core": "4.9.12",
 		"@material-ui/styles": "^4.9.10",
 		"react-spring": "^8.0.27",
-		"react-use-gesture": "^7.0.15"
+		"react-use-gesture": "^7.0.15",
+		"use-resize-observer": "^6.1.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.12.0",

package.json

@@ -2,7 +2,8 @@
 import { ClickAwayListener, makeStyles } from '@material-ui/core';
 import { CreateCSSProperties, CSSProperties } from "@material-ui/styles";
 import * as React from "react";
-import { ReactElement, useLayoutEffect, useRef } from "react";
+import { ReactElement } from "react";
+import useResizeObserver from "use-resize-observer";
 import { DragableContainer } from "./DragableContainer";
 import { Orbit } from "./Orbit";
 import { Satellite } from "./Satellite";
@@ -70,22 +71,13 @@ export function Planet(props: Props) {
     satelliteOrientation,
   } = props;
   const classes = useStyles(props);
-  const targetRef = useRef<any>();
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
+  const { ref, height = 0, width = 0 } = useResizeObserver();
   const [_open, setOpen] = React.useState(!!open);
 
   React.useEffect(() => {
     setOpen(!!open);
   }, [open]);
 
-  useLayoutEffect(() => {
-    if (targetRef && targetRef.current) {
-      setWidth(targetRef.current.offsetWidth);
-      setHeight(targetRef.current.offsetHeight);
-    }
-  }, [targetRef]);
-
   var satellites: ReactElement<any>[] = [];
   var satelliteCount = React.Children.count(children);
   React.Children.forEach(children, (c, i) => {
@@ -165,7 +157,7 @@ export function Planet(props: Props) {
             bounceOnClose={(bounce && !!!bounceOnOpen) || bounceOnClose}
             bounceDirection={bounceDirection}
           >
-            <div ref={targetRef}>{centerContent}</div>
+            <div ref={ref as any}>{centerContent}</div>
           </DragableContainer>
         </div>
       </div>

src/components/Planet.tsx

@@ -1,8 +1,8 @@
 // prettier-ignore
 import { makeStyles } from '@material-ui/core';
 import * as React from "react";
-import { useLayoutEffect, useRef } from "react";
 import { animated, useSpring } from "react-spring";
+import useResizeObserver from "use-resize-observer";
 import { DragableContainer } from "./DragableContainer";
 
 interface Props {
@@ -40,9 +40,7 @@ export function Satellite(props: Props) {
     orientation,
   } = props;
   const classes = useStyles(props);
-  const targetRef = useRef<any>();
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
+  const { ref, height = 0, width = 0 } = useResizeObserver();
   const position = useSpring({
     reverse: !open,
     from: getInitalSatellitePosition(width, height, planetWidth, planetHeight),
@@ -57,24 +55,17 @@ export function Satellite(props: Props) {
       rotation,
       orientation
     ),
-    config: { mass, tension, friction, clamp: true },
+    config: { mass, tension, friction },
   });
 
-  useLayoutEffect(() => {
-    if (targetRef && targetRef.current) {
-      setWidth(targetRef.current.offsetWidth);
-      setHeight(targetRef.current.offsetHeight);
-    }
-  }, [targetRef]);
-
   return (
     <animated.div className={classes.root} style={position}>
       <DragableContainer
         on={dragable}
         dragRadius={dragRadius}
         dragable={dragable}
       >
-        <div ref={targetRef}>{children}</div>
+        <div ref={ref as any}>{children}</div>
       </DragableContainer>
     </animated.div>
   );