feat: useWindowSize hook

src/hooks/index.ts

@@ -8,3 +8,4 @@ export * from "./useHover/useHover";
 export * from "./useFavicon/useFavicon";
 export * from "./useQueue/useQueue";
 export * from "./useTimeout";
+export * from "./useWindowSize";

src/hooks/useWindowSize/index.ts

@@ -0,0 +1 @@
+export * from "./useWindowSize";

src/hooks/useWindowSize/useWindowSize.test.tsx

@@ -0,0 +1,34 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import useWindowSize from "./useWindowSize";
+import { describe, expect, it } from "vitest";
+
+describe("useWindowSize", () => {
+  it("should return the initial window size", () => {
+    // mock
+    window.innerWidth = 1024;
+    window.innerHeight = 768;
+
+    // act
+    const { result } = renderHook(() => useWindowSize());
+
+    // assert
+    expect(result.current.width).toBe(1024);
+    expect(result.current.height).toBe(768);
+  });
+
+  it("should update the window size on resize", () => {
+    // mock
+    const { result } = renderHook(() => useWindowSize());
+
+    // act
+    act(() => {
+      window.innerWidth = 1280;
+      window.innerHeight = 720;
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    // assert
+    expect(result.current.width).toBe(1280);
+    expect(result.current.height).toBe(720);
+  });
+});

src/hooks/useWindowSize/useWindowSize.tsx

@@ -0,0 +1,28 @@
+import { useLayoutEffect, useState } from "react";
+
+export default function useWindowSize() {
+  const [size, setSize] = useState({
+    width: 0,
+    height: 0,
+  });
+
+  useLayoutEffect(() => {
+    const onResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    onResize();
+
+   window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  return {
+    height: size.height,
+    width: size.width,
+  };
+}