useMediaQuery

React hook that returns true when a CSS media query matches. Reactive — updates on viewport or system preference change.

import{ useMediaQuery, breakpoints } from "@pepulux/ui"

Live breakpoint detector

Mobile (< 768px)false

Tablet (768–1023px)false

Desktop (≥ 1024px)false

Prefers dark modefalse

Built-in breakpoints

style="color:#c084fc">import { breakpoints } style="color:#c084fc">from style="color:#86efac">"@pepulux/ui";

breakpoints.xs       // style="color:#86efac">"(max-width: 599px)"
breakpoints.sm       // style="color:#86efac">"(min-width: 600px)"
breakpoints.md       // style="color:#86efac">"(min-width: 900px)"
breakpoints.lg       // style="color:#86efac">"(min-width: 1200px)"
breakpoints.xl       // style="color:#86efac">"(min-width: 1536px)"
breakpoints.mobile   // style="color:#86efac">"(max-width: 767px)"
breakpoints.tablet   // style="color:#86efac">"(min-width: 768px) and (max-width: 1023px)"
breakpoints.desktop  // style="color:#86efac">"(min-width: 1024px)"
breakpoints.dark     // style="color:#86efac">"(prefers-color-scheme: dark)"
breakpoints.reducedMotion // style="color:#86efac">"(prefers-reduced-motion: reduce)"

Props

Prop	Type	Default	Description
query*	string	—	CSS media query string, e.g. (min-width: 768px)
returns	boolean	—	true when the media query matches, false otherwise