useBreakpoint

useBreakpoint(): Service<{ readonly name: string }>

The active breakpoint name, as a service. It is its own source — it is not derived from a resize.

Usage

import { useBreakpoint } from '@studiometa/js-toolkit';

const unsubscribe = useBreakpoint().subscribe(({ name }) => {
  document.documentElement.dataset.breakpoint = name;
});

Why it is not part of the resize service

It is backed by matchMedia change listeners, so it emits on crossings and it reports a change of the reader's font size — which a ResizeObserver on a box cannot see.

The values are in rem, and in a media query rem resolves against the initial font size, not against the root element.

ResizeProps therefore dropped breakpoints and activeBreakpoints: they were a different measurement wearing the same shape.

The named set

See Breakpoints for BREAKPOINTS, getBreakpoints() and setBreakpoints().

setBreakpoints() replaces the set and emits at once. The MediaQueryList objects are built once, and the active name is memoised for the length of one task — setBreakpoints() and the change handler of a running service clear that memo immediately.

Who else uses it

• Every responsive option resolves through the same active-name read, but a matchMedia subscription only opens for a component that declares option<Name>Changed().
• Connected elements with a scoped data-component declaration share one reference-counted subscription to this service. A page with plain declarations opens none.

The breakpoint service is part of the core graph on every page. What it costs is a subscription, and a page that asks for nothing opens none.

{ immediate: true } works here

There is always a current breakpoint.