useBreakpoints

v0.0.15testeddemo

Reactive 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`.

Source Tests

Examples

const bp = useBreakpoints(breakpointsTailwind);
const isDesktop = bp.greaterOrEqual('lg');
const isMobile = bp.smaller('md');
bp.lg; // ComputedRef<boolean> — true when viewport >= 1024px

const bp = useBreakpoints({ mobile: 0, tablet: 640, desktop: 1024 });
const active = bp.active(); // ComputedRef<'mobile' | 'tablet' | 'desktop' | ''>

Demo

Loading demo…

Signature

export function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options: UseBreakpointsOptions ={ ... }

Type Parameters

Kextends string

Parameters

Parameter	Type	Default	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