Norwegian Polka Music

    svelte-3-intl
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    svelte-3-intl

    NPM Version

    Sizes (svelte-3-intl and format-message):

    Package Size Package Size

    Internationalize your Svelte 3 apps using format-message.

    Installation

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

    Usage

    <script context="module">
      import { locale, translations, getBrowserLocale } from 'svelte-3-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-3-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-3-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-3-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

    Install

    npm i svelte-3-intl

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    18.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • cristovao-trevisan