useWindowResize Custom hook

src/pages/CustomHooks/use-window-resize/test.jsx

@@ -1,5 +1,22 @@
+import useWindowResize from "./useWindowResize";
+
 export const UseWindowResizeTest = () => {
+  const windowSize = useWindowResize();
+  const { width, height } = windowSize;
+
   return (
-    <div>UseWindowResizeTest</div>
-  )
-}
+    <div className="flex justify-center items-center h-screen flex-col gap-4">
+      <h1 className="text-3xl">
+        <span className="font-bold text-primary">useWindow</span> resize Hook
+      </h1>
+      <div>
+        <p>
+          Width is <span className="font-bold">{width}</span>
+        </p>
+        <p>
+          Height is <span className="font-bold">{height}</span>
+        </p>
+      </div>
+    </div>
+  );
+};

src/pages/CustomHooks/use-window-resize/useWindowResize.jsx

@@ -0,0 +1,27 @@
+import { useLayoutEffect, useState } from "react";
+
+export default function useWindowResize() {
+  const [windowSize, setWindowSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  function handleResize() {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  }
+
+  useLayoutEffect(() => {
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return windowSize;
+}