useMediaQuery
HookTracks whether a CSS media query matches. Reactively updates on viewport changes.
npx arupui add use-media-query
Usage
use-media-query.tsx
import { useMediaQuery } from "@/hooks/use-media-query"
function Component() {
const isMobile = useMediaQuery("(max-width: 768px)")
const prefersDark = useMediaQuery("(prefers-color-scheme: dark)")
return <div>{isMobile ? "Mobile" : "Desktop"}</div>
}Parameters
| Parameter | Type | Description |
|---|---|---|
query | string | CSS media query string |
querystringCSS media query string
Returns
boolean