useMediaQuery

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 />