1 files changed, 21 insertions, 1 deletions
diff --git a/thallium-frontend/src/utils/hooks.ts b/thallium-frontend/src/utils/hooks.ts
index a98cfb3..73cd814 100644
--- a/thallium-frontend/src/utils/hooks.ts
+++ b/thallium-frontend/src/utils/hooks.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { type RefObject } from "react";
 
 export function useVisible(ref: RefObject<HTMLElement>) {
@@ -17,3 +17,23 @@ export function useVisible(ref: RefObject<HTMLElement>) {
 
   return isVisible;
 }
+
+export function useMediaQuery(query: string) {
+  const queryObject = useMemo(() => {
+    return window.matchMedia(query);
+  }, [query]);
+
+  const [matches, setMatches] = useState(queryObject.matches);
+
+  useEffect(() => {
+    const listenHook = (e: MediaQueryListEvent) => {
+      setMatches(e.matches);
+    }
+
+    queryObject.addEventListener("change", listenHook);
+
+    return () => queryObject.removeEventListener("change", listenHook);
+  }, [queryObject]);
+
+  return matches;
+}