Use useWindowDimension hook in shapes background

components/ShapesBackground.tsx

@@ -1,3 +1,4 @@
+import { useWindowDimension } from "hooks/useWindowDimension";
 import React, { CSSProperties, useEffect, useState } from "react";
 
 import { Image } from "./Image";
@@ -10,10 +11,11 @@ interface Props {
 
 export function ShapesBackground({ getConfig }: Props) {
   const [config, setConfig] = useState<ShapesConfig>({});
+  const { width, height } = useWindowDimension();
 
   useEffect(() => {
     setConfig(getConfig?.() ?? {});
-  }, [getConfig]);
+  }, [getConfig, width, height]);
 
   return (
     <div className={styles.shapesContainer}>

hooks/useWindowDimension.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+interface WindowDimension {
+  width: number;
+  height: number;
+}
+
+function getWindowDimension() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export function useWindowDimension(): WindowDimension {
+  const [windowSize, setWindowDimension] = useState<WindowDimension>({
+    width: 0,
+    height: 0,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowDimension(getWindowDimension());
+    };
+
+    // Set size at the first client-side load
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return windowSize;
+}