useMediaQuery

Suscríbase y responda a los cambios en las consultas de medios CSS.

Instalación

npm i @raddix/use-media-query

Uso

Ejemplo básico

En este ejemplo mostraremos un mensaje si el tamaño de la pantalla es inferior a 768px.

import { useMediaQuery } from '@raddix/use-media-query';

export const Example = () => {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
};

Usando un número como consulta

También puede pasar un número como consulta; en este caso coincidirá con la consulta de medios (min-width: ${number}px).

import { useMediaQuery } from '@raddix/use-media-query';

export const Example = () => {
  const isLargeDevice = useMediaQuery(1024);

  return <div>Large: {isLargeDevice ? 'Yes' : 'No'}</div>;
};

API

Parameters

Name	Description	Required	Type
query	La consulta de medios para coincidir. Puede ser cualquier consulta de medios válida, como `(max-width: 768px)` o un número.	Yes	string \| number

Return value

Devuelve "true" si la consulta de medios coincide y "false" si no.