Refinamiento de Funciones y Estética de Mapa

Elecciones-Web/frontend/src/features/legislativas/nacionales/hooks/useMediaQuery.ts

@@ -0,0 +1,31 @@
+// src/hooks/useMediaQuery.ts
+import { useState, useEffect } from 'react';
+
+export const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    
+    const listener = () => setMatches(media.matches);
+    // Deprecated 'addListener' for broader browser support, 'addEventListener' is preferred.
+    if (media.addEventListener) {
+      media.addEventListener('change', listener);
+    } else {
+      media.addListener(listener);
+    }
+
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener('change', listener);
+      } else {
+        media.removeListener(listener);
+      }
+    };
+  }, [matches, query]);
+
+  return matches;
+};