useMediaQuery

Tracks CSS media query matches reactively.

Signature

function useMediaQuery(query: string): boolean

Parameters

Parameter	Type	Description
query	string	CSS media query string

Return Type

Type	Description
boolean	Whether the media query currently matches

Example

const isMobile = useMediaQuery('(max-width: 768px)')
const prefersDark = useMediaQuery('(prefers-color-scheme: dark)')

if (isMobile) {
  return <MobileLayout />
}

Common Queries

// Breakpoints
useMediaQuery('(max-width: 640px)')   // sm
useMediaQuery('(max-width: 768px)')   // md
useMediaQuery('(max-width: 1024px)')  // lg

// Preferences
useMediaQuery('(prefers-color-scheme: dark)')
useMediaQuery('(prefers-reduced-motion: reduce)')

See also

• useMediaQuery (Conceptual)