useMediaQuery

The useMediaQuery Hook returns a boolean value indicating whether a media query matches the current viewport.

Here's an example that supports different screen sizes:

import { useState, useEffect } from 'react'

const breakpoints = {
  sm: '(max-width: 576px)',
  md: '(min-width: 576px) and (max-width: 992px)',
  lg: '(min-width: 992px)',
}

function useMediaQuery(breakpoint) {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const mediaQuery = window.matchMedia(breakpoints[breakpoint])

    function handleMatches(event) {
      setMatches(event.matches)
    }

    // Set initial state and add event listener
    setMatches(mediaQuery.matches)
    mediaQuery.addListener(handleMatches)

    // Remove event listener on cleanup
    return () => {
      mediaQuery.removeListener(handleMatches)
    }
  }, [breakpoint])

  return matches
}

function MyComponent() {
  const isSmallScreen = useMediaQuery('sm')
  const isMediumScreen = useMediaQuery('md')
  const isLargeScreen = useMediaQuery('lg')

  return (
    <div>
      <p>Are we on a small screen? {isSmallScreen ? 'Yes' : 'No'}</p>
      <p>Are we on a medium screen? {isMediumScreen ? 'Yes' : 'No'}</p>
      <p>Are we on a large screen? {isLargeScreen ? 'Yes' : 'No'}</p>
    </div>
  )
}

Codesandbox Example