useMediaQuery

Subscribe to media query changes.

Import


import { useMediaQuery } from '@tidbcloud/uikit'

Usage

useMediaQuery subscribes to media queries. It receives a media query as an argument and returns true if the given media query matches the current state.


import { useMediaQuery } from '@tidbcloud/uikit'
 
function Demo() {
  const matches = useMediaQuery('(min-width: 768px)')
 
  return <div>{matches ? 'Desktop view' : 'Mobile view'}</div>
}

Server Side Rendering

During server side rendering, the hook returns false as window.matchMedia API is not available. You can override the initial value:


import { useMediaQuery } from '@tidbcloud/uikit'
 
function Demo() {
  // Set initial value in second argument
  const matches = useMediaQuery('(max-width: 40em)', true, {
    getInitialValueInEffect: false
  })
}

Definition


interface UseMediaQueryOptions {
  getInitialValueInEffect: boolean
}
 
function useMediaQuery(query: string, initialValue?: boolean, options?: UseMediaQueryOptions): boolean