Shadcn Hooks

useIsMatchMedia

A hook to check if the media query matches

useIsMatchMedia

npx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-is-match-media.json"
pnpm dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-is-match-media.json"
yarn dlx shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-is-match-media.json"
bun x shadcn@latest add "https://shadcn-hooks.vercel.app/r/use-is-match-media.json"

Copy and paste the following code into your project.

use-is-match-media.ts
import { useState } from 'react'
import { useIsomorphicLayoutEffect } from '@/registry/hooks/use-isomorphic-layout-effect'

export function useIsMatchMedia(mediaQueryString: string) {
  const [isMatch, setIsMatch] = useState(false)

  useIsomorphicLayoutEffect(() => {
    const mediaQueryList = window.matchMedia(mediaQueryString)

    setIsMatch(mediaQueryList.matches)

    const listener = (event: MediaQueryListEvent) => {
      setIsMatch(event.matches)
    }

    mediaQueryList.addEventListener('change', listener)

    return () => {
      mediaQueryList.removeEventListener('change', listener)
    }
  }, [mediaQueryString])

  return isMatch
}

credits

Last updated on