Locale

Formatting

useLocale() returns formatters for the app's locale. They take the native Intl options, so signs, compact notation and date styles need no extra API. Fraction digits follow the currency.

<script lang="ts">
  import { useLocale } from 'sveltier';

  let { balance, change, updatedAt }: { balance: number; change: number; updatedAt: Date } =
    $props();

  const locale = useLocale();
</script>

<p>{locale.formatCurrency(balance)}</p>
<p>{locale.formatPercent(change, { minimumFractionDigits: 2, signDisplay: 'exceptZero' })}</p>
<time datetime={updatedAt.toISOString()}>{locale.formatRelative(updatedAt)}</time>

Settings

The locale (default en-US), currency (USD), time zone (the runtime's) and messages are app-wide settings of UIProvider. They can change at runtime, for example when a user picks another currency, and every formatted value updates. A section that shows another currency or zone passes it per call.

<script>
  import { UIProvider } from 'sveltier';
  import { monolith } from 'sveltier/themes/monolith';
  let { children } = $props();
  // A user setting: changing it reformats every amount in the app.
  let currency = $state('EUR');
</script>

<UIProvider themes={monolith} locale={{ locale: 'en-IE', currency, timeZone: 'Europe/Dublin' }}>
  {@render children()}
</UIProvider>

Messages

Components announce themselves with built-in English messages such as close and loading. t(key, values) returns one, with {name} placeholders filled. To translate, pass your own messages; any you leave out stay in English.

Performance

Building an Intl formatter is the slow part, so each one is built once per locale and options and then reused. Formatting thousands of cells per second, as a price board does, costs only the format calls.

Server rendering

Numbers and money render the same on the server and in the browser. Dates without a time zone do not: the server formats them in its own zone, the browser in the user's. Set a time zone, or format such dates only in the browser.

See useLocale for every function.