Awesome Open Source
Awesome Open Source

svelte-intl

NPM Version

Sizes (svelte-intl and format-message):

Package Size Package Size

Internationalize your Svelte 3 apps using format-message.

Svelte 2

For Svelte 2 version see this branch.

Installation

npm i svelte-intl format-message # format message is a peer dependency

Usage

<script context="module">
  import { locale, translations, getBrowserLocale } from 'svelte-intl';

  // If you want to split your bundle, you can call this multiple times,
  // the dictionaries will be merged.
  translations.update({
    en: {
      hello: 'Hello, {name}',
    },
    pt: {
      hello: 'Olá, {name}',
    },
  })

  locale.set(getBrowserLocale('en')) // try to use window.navigator.language
</script>

<script>
  // use _ or translate
  import { _ } from 'svelte-intl'

  export let name = 'John'
</script>

<h1> {$_('hello', { name })} </h1>

API

translate (or "_")

Translation store

  • Type: svelte.Readable<typeof formatMessage>

Example

<script>
  import { get } from 'svelte/store'
  import { translate } from 'svelte-intl'

  const title = get(translate)('title')
</script>

<h1> Title: {title} </h1>
<h1> Reactive Title: {$translate('title')} </h1>

translations

Available translations

  • Type: Object
    • set(translations) => void : Replace translations (avoid this)
    • update(translations) => void : Add more translations
    • subscribe : Store subscription, avoid using this directly

locale

Current locale

  • Type: like svelte.Readable<string>, but with safe update and set (logs error if locale is not found)
  • Note: Set and update return a boolean indicating if the locale was found

locales

Available locales, derived from translation

  • Type: svelte.Readable<string[]>

Usage

<!-- LanguageSelector.svelte -->
<script>
  import { locale, locales } from 'svelte-intl'

  const setLocale = e => locale.set(e.target.value)
</script>

<select value={$locale} on:change={setLocale}>
  {#each $locales as l}
    <option value={l}> {l} </option>
  {/each}
</select>

options

See format-message options
Just call options.set({ }) :)

  • Type: svelte.Readable<formatMessage.SetupOptions> (but update merges with current config)

getBrowserLocale

Tries to match the window.navigator.language to the available dictionaries

  • Params:
    • defaultLocale {string}: If no match is found, returns this
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (266,129
Types (29,932
Format (16,286
Translation (13,604
Svelte (6,418
I18n (4,859
Intl (3,345
Sveltejs (567