Display

Breakpoints

Your viewport right now: xs, mobile yes. Resize the window to watch it change.

Usage

Call useDisplay() during component initialisation and read its flags; each one is reactive and only updates the component when its own threshold is crossed.

<script>
  import { useDisplay } from 'sveltier';

  const display = useDisplay();
  // Behaviour, not layout: fewer rows per page on small screens.
  const pageSize = $derived(display.mdAndUp ? 50 : 20);
</script>

{#if display.mobile}
  <MobileOrderTicket />
{:else}
  <OrderTicket />
{/if}

CSS first

Use CSS media and container queries for layout: they apply before any JavaScript runs. Use useDisplay for decisions CSS cannot make, such as which component to render or how much data to load.

Server rendering

The server cannot know the viewport, so it renders mobile first: xs, and mobile is true. On the client the real values apply at once, so content that depends on them can change right after hydration. Keep such content small, or give the server a width from client hints or a cookie when the app knows the device class. Thresholds, the mobile breakpoint and that width are options of UIProvider:

<!-- +layout.svelte: your own thresholds, and the width the server assumes -->
<UIProvider
  themes={monolith}
  display={{ thresholds: { md: 1024 }, mobileBreakpoint: 'lg', ssrWidth: data.viewportWidth }}
>
  {@render children()}
</UIProvider>

See useDisplay for every flag.