MatchMedia

a component that conditionally renders its children based on a media query.

It uses a custom useMediaQuery hook internally to determine whether the specified media conditions are met.

im planning to add a lazy version of this component whenever i have time.

Installation

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

Usage

import { MatchMediaBreakpoint, MatchMedia } from "@/components/ui/MatchMedia";

<MatchMediaBreakpoint breakpoint="sm">
  <div>children&apos;s gets rendered on sm tailwindcss breakpoint</div>
</MatchMediaBreakpoint>

<MatchMedia query="(max-width:640px)" fallback={<div>fallback</div>}>
  <div>children&apos;s gets rendered on max-width:640px</div>
</MatchMedia>