useDisplay
Returns reactive breakpoint flags for the current viewport.
Signature
import { useDisplay, type DisplayInstance } from 'sveltier';
function useDisplay(): DisplayInstance;Call it during component initialisation. Every component gets the same instance, built on one MediaQuery per threshold; nothing listens to resize events.
Returns
| Name | Type | Description |
|---|---|---|
name | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | The current breakpoint. |
xs … xxl | boolean | Whether the viewport is within that breakpoint. |
smAndUp … xlAndUp | boolean | Whether the viewport is at that breakpoint or wider. |
smAndDown … xlAndDown | boolean | Whether the viewport is at that breakpoint or narrower. |
mobile | boolean | Whether the viewport is narrower than the mobile breakpoint (md by default). |
thresholds | Readonly<DisplayThresholds> | The minimum width in px of sm, md, lg, xl and xxl. |
See Display for the breakpoints and how server rendering works.