https://github.com/panya/svelte-intl

Internationalize your Svelte apps using format-message and Intl object
https://github.com/panya/svelte-intl

format-message i18n intl svelte sveltejs

Last synced: 3 months ago
JSON representation

Internationalize your Svelte apps using format-message and Intl object

• Host: GitHub
• URL: https://github.com/panya/svelte-intl
• Owner: Panya
• License: mit
• Created: 2019-01-13T15:29:42.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-10-02T07:25:50.000Z (over 1 year ago)
• Last Synced: 2024-10-14T19:21:55.552Z (3 months ago)
• Topics: format-message, i18n, intl, svelte, sveltejs
• Language: TypeScript
• Size: 1.02 MB
• Stars: 48
• Watchers: 3
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-intl

[![NPM Version](https://img.shields.io/npm/v/svelte-intl.svg)](https://npm.im/svelte-intl)

Sizes (svelte-intl and format-message):

[![Package Size](https://badgen.net/bundlephobia/minzip/svelte-intl)](https://bundlephobia.com/result?p=svelte-intl@latest)

[![Package Size](https://badgen.net/bundlephobia/minzip/format-message)](https://bundlephobia.com/result?p=format-message@latest)

Internationalize your Svelte 3 apps using [format-message](https://github.com/format-message/format-message).

## Svelte 2

For Svelte 2 version see [this branch](https://github.com/Panya/svelte-intl/tree/svelte2).

## Installation

```sh

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

```

## Usage

```html

  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

  // use _ or translate

  import { _ } from 'svelte-intl'

  export let name = 'John'

 {$_('hello', { name })} 

```


## API

## `translate` (or "`_`")

> Translation store

- Type: `svelte.Readable`

### Example

```html

  import { get } from 'svelte/store'

  import { translate } from 'svelte-intl'

  const title = get(translate)('title')

 Title: {title} 

 Reactive Title: {$translate('title')} 

```


## `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`, 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`

### Usage

```html

  import { locale, locales } from 'svelte-intl'

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

  {#each $locales as l}

     {l} 

  {/each}

```

## options

> See [format-message options](https://github.com/format-message/format-message/tree/master/packages/format-message#formatmessagesetupoptions) \

  Just call `options.set({  })` :)

- Type: `svelte.Readable` (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