Skip to Content
react-utilsuseMediaQuery

useMediaQuery

See source on Github

Returns a boolean indicating whether the passed media query matches current device / viewport state.

  • @param media - A valid media query string
  • @param options - Configurable options
  • @returns - true if media query matches
  • false if media query does not match
  • undefined on initial render / server-side

Example

const isMobile = useMediaQuery('(max-width: 640px)') if (isMobile === undefined) return <Loader /> return isMobile ? <MobileLayout /> : <DesktopLayout />