Hookagain
hookuse-media-querysource: ok · refreshed
Use Media Query
npx shadcn add "https://hookagain.vercel.app/r/use-media-query.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/2/2026, 4:11:43 PM
hooks/use-media-query.ts
import * as React from "react";
export function useMediaQuery(query: string) {
const [matches, setMatches] = React.useState(false);
React.useEffect(() => {
const mediaQuery = window.matchMedia(query);
setMatches(mediaQuery.matches);
const listener = (event: MediaQueryListEvent) => {
setMatches(event.matches);
};
mediaQuery.addEventListener("change", listener);
return () => {
mediaQuery.removeEventListener("change", listener);
};
}, [query]);
return matches;
}