useIsMatchMedia
A hook to check if the media query matches
Loading...
Installation
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
}API
/**
* A hook to check if the media query matches
* @param mediaQueryString - The media query string to check
* @see https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia#mediaquerystring
* @returns A boolean indicating if the media query matches
*/
export function useIsMatchMedia(mediaQueryString: string): booleanCredits
Last updated on