cupcakearmy/svelte-i18n
1
0
Fork 0
mirror of https://github.com/cupcakearmy/svelte-i18n.git synced 2024-11-16 18:10:43 +01:00
Code Issues Packages Projects Releases Wiki Activity
12f0601215
svelte-i18n/docs/Locale.md
Christian Kaisermann 69ec477ffd docs: ✏️ move docs out of wiki
2020-01-21 10:00:45 -03:00

1.5 KiB
Raw Blame History

import { locale } from 'svelte-i18n'

$locale

The locale store defines what is the current locale. When its value is changed, before updating the actual stored value, svelte-i18n sees if there's any message loaders registered for the new locale:

  • If yes, changing the locale is an async operation.
  • If no, the locale's dictionary is fully loaded and changing the locale is a sync operation.

The <html lang> attribute is automatically updated to the current locale.

Usage on component

To change the locale inside a component is as simple as assinging it a new value.

<script>
  import { locale, locales } from 'svelte-i18n'
</script>

<select bind:value={$locale}>
  {#each $locales as locale}
    <option value={locale}>{locale}</option>
  {/each}
</select>

Usage on regular script

import { locale } from 'svelte-i18n'

// Set the current locale to en-US
locale.set('en-US')

// This is a store, so we can subscribe to its changes
locale.subscribe(() => console.log('locale change'))

$loading

While changing the $locale, the $loading store can be used to detect if the app is currently fetching any enqueued message definitions.

<script>
  import { loading } from 'svelte-i18n'
</script>

{#if loading}
  Please wait...
{:else}
  <Nav />
  <Main />
{/if}

$loading will only be true if fetching takes more than 200ms.