Blife UI

¿Qué hace?

Escucha cambios en media queries de CSS y devuelve true o false según si se cumple. Se actualiza automáticamente cuando cambia el tamaño de pantalla o las preferencias.

Importación

import { useMediaQuery } from "@blifedesarrollo/hooks";

Uso básico

Detectar tamaño de pantalla

function App() {
  const isMobile = useMediaQuery("(max-width: 768px)");
 
  return <div>{isMobile ? <MobileLayout /> : <DesktopLayout />}</div>;
}

Múltiples breakpoints

function ResponsiveGrid() {
  const isSmall = useMediaQuery("(max-width: 640px)");
  const isMedium = useMediaQuery("(min-width: 641px) and (max-width: 1024px)");
  const isLarge = useMediaQuery("(min-width: 1025px)");
 
  const columns = isSmall ? 1 : isMedium ? 2 : isLarge ? 3 : 1;
 
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
      {items.map((item) => (
        <Card key={item.id} {...item} />
      ))}
    </div>
  );
}

Casos de uso comunes

Preferencias del usuario

function App() {
  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
  const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
 
  return (
    <div className={prefersDark ? "dark" : "light"}>
      {prefersReducedMotion ? <StaticAnimation /> : <AnimatedComponent />}
    </div>
  );
}

SSR (Server Side Rendering)

Para evitar errores de hidratación en Next.js u otros frameworks SSR, usa initialValue:

// ❌ Puede causar error de hidratación
const isMobile = useMediaQuery("(max-width: 768px)");
 
// ✅ Valor inicial seguro para SSR
const isMobile = useMediaQuery("(max-width: 768px)", {
  initialValue: false, // ← Valor por defecto hasta que se evalúe en el cliente
});

API

Parámetros

Parámetro	Tipo	Descripción
`query`	`string`	Media query CSS (ej: `"(max-width: 768px)"`)
`options`	`UseMediaQueryOptions`	Opciones opcionales (ver abajo)

Opciones

Opción	Tipo	Default	Descripción
`initialValue`	`boolean`	-	Valor inicial (útil para SSR)
`getInitialValueInEffect`	`boolean`	`true`	Si es `true`, evalúa el valor inicial solo dentro del efecto

Retorno

Valor	Tipo	Descripción
`matches`	`boolean`	`true` si la media query se cumple, `false` si no

use-media-query