useMediaQuery

go previousgo next

the useMediaQuery module provides hooks for working with responsive breakpoints in React applications. its written using the window.matchMedia API and facade pattern.

this module provides 3 hooks:

  • useMediaQuery: you can pass any css query string to this hook, it also supports auto complete.

    const isLg = useMediaQuery("(min-width: 64rem)");
const isNotMd = useMediaQuery("(max-width: 48rem)");

  • useMediaQueryBreakpoint: based on Tailwind breakpoints, by default similar to tailwindcss it uses mobile first approach and uses min-width you can swap the direction to max to check for the breakpoint and below

    const isMobile = useMediaQueryBreakpoint("sm");
const isTablet = useMediaQueryBreakpoint("md", "max");
const isDesktop = useMediaQueryBreakpoint("lg", "min");

  • useIsMobile: returns true on sm/640px/40rem and below

    const isMobile = useIsMobile();

Installation

pnpm dlx shadcn@latest add https://mhl5.vercel.app/r/useMediaQuery.json