DocsCloud UI HooksuseMediaQuery

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
useIntersectionuseMouse