AFAqua Fusion

useMediaQuery

A hook for responsive breakpoint detection using CSS media queries. Returns a boolean indicating whether the given media query matches. SSR-safe, defaulting to false during server rendering. Also exports predefined breakpoint hooks for common Tailwind CSS breakpoints.

Import

import { useMediaQuery } from '@wavebooking/aqua-fusion';

Usage

function ResponsiveLayout() {
  const isMobile = useMediaQuery('(max-width: 639px)');
  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
  return (
    <div>
      {isMobile ? <MobileNav /> : <DesktopNav />}
      {isDarkMode && <span>Dark mode is active</span>}
    </div>
  );
}

Parameters

ParameterTypeDescription
querystringA valid CSS media query string (e.g., '(max-width: 640px)').

Return Value

TypeDescription
booleantrue if the media query currently matches, false otherwise. Defaults to false during SSR.

Related Hooks

The module also exports predefined convenience hooks:

HookDescription
useIsMobile()Returns true when viewport is below 640px.
useIsTablet()Returns true when viewport is between 640px and 1023px.
useIsDesktop()Returns true when viewport is 1024px or wider.
useBreakpoint()Returns 'mobile', 'tablet', or 'desktop' based on current viewport.
usePrefersDarkMode()Returns true if the user prefers dark color scheme.
usePrefersReducedMotion()Returns true if the user prefers reduced motion.