Returns whether a CSS media query currently matches. Useful for responsive behavior in JS.
Returns null during SSR / before the first client-side check (to avoid hydration mismatches).
null
A valid CSS media query string (e.g. "(min-width: 768px)", "(prefers-color-scheme: dark)").
"(min-width: 768px)"
"(prefers-color-scheme: dark)"
true if the query matches, false if it doesn't, or null during SSR.
true
false
import { useBreakpoint } from "naystack/client";function ResponsiveNav() { const isMobile = useBreakpoint("(max-width: 639px)"); if (isMobile === null) return <Skeleton />; // SSR fallback return isMobile ? <MobileNav /> : <DesktopNav />;} Copy
import { useBreakpoint } from "naystack/client";function ResponsiveNav() { const isMobile = useBreakpoint("(max-width: 639px)"); if (isMobile === null) return <Skeleton />; // SSR fallback return isMobile ? <MobileNav /> : <DesktopNav />;}
const prefersReducedMotion = useBreakpoint("(prefers-reduced-motion: reduce)"); Copy
const prefersReducedMotion = useBreakpoint("(prefers-reduced-motion: reduce)");
Returns whether a CSS media query currently matches. Useful for responsive behavior in JS.
Returns
nullduring SSR / before the first client-side check (to avoid hydration mismatches).