useMatchMedia()
Efficiently subscribes to a
window.matchMedia query and returns whether it currently matches.import {useMatchMedia} from '@sanity/ui'
function App() {
// `isWide` updates when the viewport crosses 600px
const isWide = useMatchMedia('(min-width: 600px)')
return <>{isWide ? 'Wide viewport' : 'Narrow viewport'}</>
}The optional
getServerSnapshot parameter is only called during server-side rendering (and hydration), where the media query cannot be evaluated.(
mediaQueryString: `(${string})`,
getServerSnapshot?: () => boolean
) => boolean