useMediaQuery

Hooks

Subscribe to a CSS media query. Returns false during SSR to avoid hydration mismatches.

Install

npx bouncekit@latest add usemediaquery

Import

import { useMediaQuery } from "@/hooks/use-media-query.ts"

import { useMediaQuery } from "@/hooks/use-media-query"

const isDesktop = useMediaQuery("(min-width: 768px)")
// Returns false during SSR to avoid hydration mismatch.

API Reference

Prop	Type	Required	Description
`query`	`string`	yes	CSS media query string, e.g. '(min-width: 768px)'.

Source

src/hooks/use-media-query.ts

Components/Hooks/useMediaQuery