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.
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