Skip to main content

useMediaQuery

Overview​

The useMediaQuery() is a custom hook used to determine if the current viewport matches a given media query.

Usages​

To utilize the useMediaQuery() hook, please refer to the example provided below:

Example​

/use-media-query

Example screen size is larger than 800px

Source Code​

'use client'

// Hook Imports
import useMediaQuery from '@menu/hooks/useMediaQuery'

const MediaQuery = () => {
  const isSmallerThan800 = useMediaQuery('800px')

  return (
    <main className='p-4 flex-grow'>
      <p>
        {isSmallerThan800 ? 'Example screen size is smaller than 800px' : 'Example screen size is larger than 800px'}
      </p>
    </main>
  )
}

export default MediaQuery