cupcakearmy/svelte-i18n
1
0
Fork 0
mirror of https://github.com/cupcakearmy/svelte-i18n.git synced 2024-06-22 23:04:48 +02:00
Code Issues Packages Projects Releases Wiki Activity
e91e822df1
svelte-i18n/docs/Locale.md
Christian Kaisermann af732ee2a3 docs: ✏️ rename $loading to $isLoading
2020-02-11 13:09:26 -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'))

$isLoading

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

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

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

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