/// hooks

useMediaQuery

Subscribe to a CSS media query and re-render when it changes. It is SSR-safe: returns false during server render and the first client paint, then the real match after hydration — so it never causes a layout mismatch. A companion useBreakpoint keys the same mechanism to the PDS breakpoint scale.

Signature

useMediaQuery

function useMediaQuery(query: string): boolean;

// keyed to the token breakpoint scale (xs · sm · md · lg · xl)
function useBreakpoint(bp: Breakpoint): boolean;

Parameters

Parameter	Type	Description
`query`	`string`	Any CSS media query, e.g. "(min-width: 860px)".

Returns

Field	Type	Description
`(return)`	`boolean`	True when the query currently matches; false on the server.

When to use

Branch behaviour — not just styling — on viewport size, e.g. render a Sheet on mobile and a Popover on desktop.
Respond to any media feature: orientation, hover capability, or reduced data.
Prefer useBreakpoint over a hand-written width query so your JS breakpoints stay in lockstep with the token scale.

Example

responsive component choice

import { useBreakpoint } from "@protocore/pds";

function Nav() {
  const isDesktop = useBreakpoint("md"); // min-width: 860px

  return isDesktop ? <SidebarNav /> : <DrawerNav />;
}

Note

Because it returns false until after hydration, the first client render matches the server. Design the false branch as your mobile / default case to avoid a flash.