Use media query hook

Hook, which listens for changes in screen width and reacts accordingly.

import { useSyncExternalStore } from 'react'

export const useMediaQuery = (query: string) => {
  return useSyncExternalStore(
    callback => {
      const mql = window.matchMedia(query)
      mql.addEventListener('change', callback)
      return () => mql.removeEventListener('change', callback)
    },
    () => window.matchMedia(query).matches,
    () => false
  )
}

Example of usage:

const isLargeScreen = useMediaQuery('(min-width: 1024px)')

Go back to shorts