useMediaQuery uses useSyncExternalStore to reactively track media query matches.
on server useMediaQuery returns undefined. there is also a useMediaQueryBreakpoint exported, this hook is type safe and accepts a tailwind css breakpoint as an argument.
Usage
import { useMediaQuery } from "@/hooks/useMediaQuery"; import { useMediaQueryBreakpoint } from "@/hooks/useMediaQuery";
const isMobile = useMediaQuery("(min-width: 640px)"); const isLg = useMediaQueryBreakpoint("lg");