From 206ad0c528f559fd31f983f9e6abab6ee26e09cd Mon Sep 17 00:00:00 2001
From: Markus Thielker <mail.markus.thielker@gmail.com>
Date: Sun, 17 Mar 2024 00:42:01 +0100
Subject: [PATCH] N-FIN-33: create useMediaQuery hook
---
src/lib/hooks/useMediaQuery.ts | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
create mode 100644 src/lib/hooks/useMediaQuery.ts
diff --git a/src/lib/hooks/useMediaQuery.ts b/src/lib/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..0d7a61d
--- /dev/null
+++ b/src/lib/hooks/useMediaQuery.ts
@@ -0,0 +1,16 @@
+import { useEffect, useMemo, useState } from 'react';
+
+export function useMediaQuery(mq: string) {
+
+ const mql = useMemo(() => matchMedia(mq), [mq]);
+ const [matches, setMatch] = useState(mql.matches);
+
+ useEffect(() => {
+ const listener = (e: any) => setMatch(e.matches);
+ mql.addEventListener('change', listener);
+
+ return () => mql.removeEventListener('change', listener);
+ }, [mq, mql]);
+
+ return matches;
+}