From 404bba3e033e5396b0f219fd236d985cda6c0353 Mon Sep 17 00:00:00 2001
From: Mortefal <morten.falstad@obos.no>
Date: Tue, 11 Mar 2025 12:46:15 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20legge=20til=20en=20hjelper=20for=20?=
 =?UTF-8?q?=C3=A5=20h=C3=A5ndtere=20breakpoints=20som=20kan=20p=C3=A5virke?=
 =?UTF-8?q?=20funksjonalitet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react/src/index.ts                 |  1 +
 packages/react/src/utils/use-media-query.ts | 21 +++++++++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 packages/react/src/utils/use-media-query.ts

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 98de2a4c1..33586c9ff 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -21,3 +21,4 @@ export * from './card';
 export * from './date-formatter';
 export * from './video-loop';
 export * from './disclosure';
+export * from './utils/use-media-query';
diff --git a/packages/react/src/utils/use-media-query.ts b/packages/react/src/utils/use-media-query.ts
new file mode 100644
index 000000000..677ab7fa3
--- /dev/null
+++ b/packages/react/src/utils/use-media-query.ts
@@ -0,0 +1,21 @@
+'use client';
+import { useEffect, useState } from 'react';
+
+export interface MediaQueryResult {
+  matches: boolean;
+}
+
+export function useMediaQuery(mediaQuery: string): MediaQueryResult {
+  const [matches, setMatches] = useState<boolean>(false);
+  useEffect(() => {
+    const listener = window.matchMedia(mediaQuery);
+    setMatches(listener.matches);
+
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+
+    listener.addEventListener('change', handler);
+    return () => listener.removeEventListener('change', handler);
+  }, [mediaQuery]);
+
+  return { matches };
+}