fn
useBreakpoints
v0.0.14testeddemoReactive viewport breakpoints derived from a breakpoints map.
SSR-safe (resolves width queries from ssrWidth before matchMedia exists),
reactive to breakpoint values, and built on a single useMediaQuery per
comparison. Comes with presets: breakpointsTailwind, breakpointsBootstrapV5,
breakpointsAntDesign, breakpointsVuetifyV3.
Examples
ts
const bp = useBreakpoints(breakpointsTailwind);
const isDesktop = bp.greaterOrEqual('lg');
const isMobile = bp.smaller('md');
bp.lg; // ComputedRef<boolean> — true when viewport >= 1024pxts
const bp = useBreakpoints({ mobile: 0, tablet: 640, desktop: 1024 });
const active = bp.active(); // ComputedRef<'mobile' | 'tablet' | 'desktop' | ''>Demo
Loading demo…
Signature
ts
export function useBreakpoints<K extends string>(
breakpoints: Breakpoints<K>,
options: UseBreakpointsOptions ={ ... }Type Parameters
Kextends stringParameters
| Parameter | Type | Description |
|---|---|---|
breakpoints | Breakpoints<K> | The breakpoints map (name → width) |
options? | UseBreakpointsOptions | Options (strategy, custom window, ssrWidth) |
Returns
UseBreakpointsReturn<K>Shortcut refs per breakpoint plus comparison helpers