useMediaQuery — Suscribirse a coincidencias de consultas de medios CSS en JavaScript

import { useState, useEffect, useCallback } from "react";
 
/**
 * useMediaQuery
 * Devuelve `true` cuando la consulta de medios CSS dada coincide.
 * Seguro para SSR: devuelve `defaultValue` en el servidor.
 */
function useMediaQuery(
  query: string,
  defaultValue: boolean = false
): boolean {
  const [matches, setMatches] = useState<boolean>(() => {
    if (typeof window === "undefined") return defaultValue;
    return window.matchMedia(query).matches;
  });
 
  useEffect(() => {
    if (typeof window === "undefined") return;
 
    const mql = window.matchMedia(query);
    setMatches(mql.matches);
 
    const handler = (e: MediaQueryListEvent) => {
      setMatches(e.matches);
    };
 
    mql.addEventListener("change", handler);
    return () => mql.removeEventListener("change", handler);
  }, [query]);
 
  return matches;
}
 
/**
 * Hooks de conveniencia construidos sobre useMediaQuery
 */
function useIsMobile(breakpoint: number = 768): boolean {
  return useMediaQuery(`(max-width: ${breakpoint - 1}px)`);
}
 
function useIsDesktop(breakpoint: number = 1024): boolean {
  return useMediaQuery(`(min-width: ${breakpoint}px)`);
}
 
function usePrefersDarkMode(): boolean {
  return useMediaQuery("(prefers-color-scheme: dark)");
}
 
function usePrefersReducedMotion(): boolean {
  return useMediaQuery("(prefers-reduced-motion: reduce)");
}

"use client";
 
function ResponsiveNav() {
  const isMobile = useIsMobile();
  const prefersDark = usePrefersDarkMode();
  const reducedMotion = usePrefersReducedMotion();
 
  return (
    <nav
      style={{
        background: prefersDark ? "#1a1a2e" : "#ffffff",
        transition: reducedMotion ? "none" : "background 0.3s",
      }}
    >
      {isMobile ? <HamburgerMenu /> : <DesktopMenu />}
    </nav>
  );
}
 
function HamburgerMenu() {
  return <button aria-label="Menu">☰</button>;
}
 
function DesktopMenu() {
  return (
    <ul style={{ display: "flex", gap: 16, listStyle: "none" }}>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  );
}
 
function AdaptiveGrid() {
  const isDesktop = useIsDesktop();
  const columns = isDesktop ? 3 : 1;
 
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap: 16,
      }}
    >
      <div>Card 1</div>
      <div>Card 2</div>
      <div>Card 3</div>
    </div>
  );
}

const isSm = useMediaQuery("(min-width: 640px)");
const isMd = useMediaQuery("(min-width: 768px)");
const isLg = useMediaQuery("(min-width: 1024px)");

function useBreakpoint() {
  const isSm = useMediaQuery("(min-width: 640px)");
  const isMd = useMediaQuery("(min-width: 768px)");
  const isLg = useMediaQuery("(min-width: 1024px)");
  const isXl = useMediaQuery("(min-width: 1280px)");
 
  if (isXl) return "xl";
  if (isLg) return "lg";
  if (isMd) return "md";
  if (isSm) return "sm";
  return "xs";
}