useMediaQuery

Search…

useMediaQuery

Specification
Returns a boolean verdict whether device matches the given media query Object.
Definition
1
type UseMediaQuery = (breakpoint: Breakpoint, initialMatches?: boolean) => boolean
Copied!
Please see the Breakpoints page for the Breakpoint type reference:
Breakpoints
Example
1
import React from 'react'
2
import { useMediaQuery } from 'atomic-layout'
3
​
4
export const Component = () => {
5
  const isSmallScreen = useMediaQuery({ maxWidth: 450 })
6
  
7
  return isSmallScreen ? <p>On mobile</p> : <p>On larger screens</p>
8
}
Copied!
Using initial match
The hook resolves to false upon initial render. To change that behavior pass the initial value as the second argument to the hook:
1
import React from 'react'
2
import { useMediaQuery } from 'atomic-layout'
3
​
4
export const Component = () => {
5
  const isPortrait = useMediaQuery({ orientation: 'portrait' }, true)
6
  
7
  return <AnotherComponent isPortrait={isPortrait} />
8
}
Copied!

API - Previous

Hooks

useResponsiveQuery

Last modified 1yr ago

Copy link

Contents