# svelte-intl

> Internationalize your Svelte 3 apps

Latest version **1.1.4** (published 2022-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-intl
pnpm add svelte-intl
yarn add svelte-intl
bun add svelte-intl
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; esm support; high quality score.

Warnings: low downloads; has vulnerabilities.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2022-04-04 |
| First published | 2019-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.7 KB |
| Known vulnerabilities | 1 |
| Install scripts | no |
| GitHub stars | 46 |
| Author | Cristóvão Trevisan |
| Maintainers | panya |
| Keywords | svelte, 3, svelte-3, svelte3, format-message, intl, i18n |

## Links

- npm: https://www.npmjs.com/package/svelte-intl
- Repository: https://github.com/Panya/svelte-intl
- Issues: https://github.com/Panya/svelte-intl/issues
- npm.io page: https://npm.io/package/svelte-intl

## Alternatives

- [messageformat](https://npm.io/package/messageformat.md) — 329.7K weekly downloads
- [@mintlify/scraping](https://npm.io/package/@mintlify/scraping.md) — 294.8K weekly downloads
- [@mintlify/previewing](https://npm.io/package/@mintlify/previewing.md) — 209.5K weekly downloads
- [@mintlify/prebuild](https://npm.io/package/@mintlify/prebuild.md) — 209.5K weekly downloads
- [@mintlify/link-rot](https://npm.io/package/@mintlify/link-rot.md) — 206.3K weekly downloads

## Recent versions

- 1.1.4 (latest) — 2022-04-04
- 1.1.3 — 2021-03-30
- 1.1.2 — 2020-07-16
- 1.1.1 — 2020-04-17
- 1.1.0 — 2020-02-25
- 1.0.5 — 2019-08-28
- 1.0.4 — 2019-06-15
- 1.0.3 — 2019-06-11
- 1.0.2 — 2019-06-11
- 1.0.1 — 2019-06-11
- 0.1.0 — 2019-02-25
- 0.0.8 — 2019-02-09
- 0.0.7 — 2019-01-16
- 0.0.6 — 2019-01-13
- 0.0.5 — 2019-01-13
- … 4 more at https://npm.io/package/svelte-intl/versions

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

```html
<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
```html
<!-- 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](https://github.com/format-message/format-message/tree/master/packages/format-message#formatmessagesetupoptions) \
  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

---
_Source: https://npm.io/package/svelte-intl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._