From 895defa4536401083b6ccdc39f90ab57140ef98d Mon Sep 17 00:00:00 2001
From: Tyler <tyler@crispygoat.com>
Date: Wed, 17 Jun 2026 14:20:31 -0600
Subject: [PATCH] feat(hooks): add useMediaQuery hook for responsive component
 logic

---
 src/lib/use-media-query.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/lib/use-media-query.ts

diff --git a/src/lib/use-media-query.ts b/src/lib/use-media-query.ts
new file mode 100644
index 0000000..e5f9936
--- /dev/null
+++ b/src/lib/use-media-query.ts
@@ -0,0 +1,21 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia(query);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mq.addEventListener("change", handler);
+    setMatches(mq.matches);
+    return () => mq.removeEventListener("change", handler);
+  }, [query]);
+
+  return matches;
+}