From af4d2dbfd0521a370078df7fb15740ded3838673 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 17 Feb 2024 10:23:43 -0600
Subject: [PATCH] feat: reactive wide format

---
 src/hooks/useWideFormat.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useWideFormat.ts b/src/hooks/useWideFormat.ts
index b18a94f48..022d8561d 100644
--- a/src/hooks/useWideFormat.ts
+++ b/src/hooks/useWideFormat.ts
@@ -1,4 +1,19 @@
+import { useEffect, useState } from 'react';
+
+function hasWideFormat() {
+  return typeof window !== 'undefined' && window.innerWidth > 880;
+}
+
 export function useWideFormat() {
-  const wideFormat = typeof window !== 'undefined' && window.innerWidth > 880;
+  const [wideFormat, setWideFormat] = useState(hasWideFormat());
+
+  useEffect(() => {
+    function handleResize() {
+      setWideFormat(hasWideFormat());
+    }
+
+    window.addEventListener('resize', handleResize);
+  }, []);
+
   return wideFormat;
 }