feat: add useComponentSize hook

Author: thomasthiebaud

README.md

@@ -20,3 +20,23 @@ const YourComponent = () => {
   );
 };
 ```
+
+## useComponentSize
+
+```js
+import { useComponentSize } from "react-use-size";
+
+const YourComponent = () => {
+  const { ref, height, width } = useComponentSize();
+
+  return (
+    <React.Fragment>
+      <div ref={ref}>
+        Component
+        <p>Height: {height}</p>
+        <p>Width: {width}</p>
+      </div>
+    </React.Fragment>
+  );
+};
+```

package-lock.json

@@ -45,5 +45,8 @@
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --extends @commitlint/config-conventional",
       "pre-commit": "npm run lint"
     }
+  },
+  "dependencies": {
+    "resize-observer-polyfill": "1.5.1"
   }
 }

package.json

@@ -1 +1,2 @@
+export { useComponentSize } from "./useComponentSize";
 export { useWindowSize } from "./useWindowSize";

src/index.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import ResizeObserver from "resize-observer-polyfill";
+
+export function useComponentSize() {
+  const [size, setSize] = React.useState({
+    height: 0,
+    width: 0,
+  });
+  const ref = React.useRef<HTMLElement>();
+
+  const onResize = React.useCallback(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const newHeight = ref.current.offsetHeight;
+    const newWidth = ref.current.offsetWidth;
+
+    if (newHeight !== size.height || newWidth !== size.width) {
+      setSize({
+        height: newHeight,
+        width: newWidth,
+      });
+    }
+  }, [ref.current]);
+
+  React.useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => onResize());
+    resizeObserver.observe(element);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref.current]);
+
+  return {
+    ref,
+    ...size,
+  };
+}