svelte-i18n
Internationalization for Svelte.
See Demo
Usage
svelte-i18n
utilizes svelte stores
for keeping track of the current locale, dictionary of messages and the main format function. This way, we keep everything neat, in sync and easy to use on your svelte files.
Locale
The locale
store defines what is the current locale.
import { locale, dictionary } from 'svelte-i18n'
locale.set('en-US')
locale.subscribe(() => {
console.log('locale change')
})
The dictionary
The dictionary
store defines the dictionary of messages of all locales.
import { locale, dictionary } from 'svelte-i18n'
dictionary.set({
pt: {
message: 'Mensagem',
'switch.lang': 'Trocar idioma',
greeting: {
ask: 'Por favor, digite seu nome',
message: 'Olá {name}, como vai?',
},
photos:
'Você {n, plural, =0 {não tem fotos.} =1 {tem uma foto.} other {tem # fotos.}}',
cats: 'Tenho {n, number} {n,plural,=0{gatos}one{gato}other{gatos}}',
},
en: {
message: 'Message',
'switch.lang': 'Switch language',
greeting: {
ask: 'Please type your name',
message: 'Hello {name}, how are you?',
},
photos:
'You have {n, plural, =0 {no photos.} =1 {one photo.} other {# photos.}}',
cats: 'I have {n, number} {n,plural,one{cat}other{cats}}',
},
})
dictionary.update(dict => {
dict.fr = {
}
return dict
})
Each language message dictionary can be as deep as you want. Messages can also be looked up by a string represetation of it's path on the dictionary (i.e greeting.message
).
Formatting
The _
/format
store is the actual formatter method. To use it, it's simple as any other svelte store.
<script>
import { _ } from 'svelte-i18n'
</script>
<input placeholder="{$_('greeting.ask')}" />
svelte-i18n
uses formatjs
behind the scenes, which means it supports the ICU message format for interpolation, pluralization and much more.
<div>
{$_('greeting.message', { name: 'John' })}
{$_('photos', { n: 0 })}
{$_('photos', { n: 12 })}
</div>
Formatting methods
_
/ format
function(messageId: string, locale:? string): string
function(messageId: string, interpolations?: object, locale:? string): string
Main formatting method that formats a localized message by its id.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_('greeting.ask')}</div>
_.upper
Transforms a localized message into uppercase.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.upper('greeting.ask')}</div>
_.lower
Transforms a localized message into lowercase.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.lower('greeting.ask')}</div>
_.capital
Capitalize a localized message.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.capital('greeting.ask')}</div>
_.title
Transform the message into title case.
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.capital('greeting.ask')}</div>
_.time
function(time: Date, format?: string, locale?: string)
Formats a date object into a time string with the specified format (short
, medium
, long
, full
). Please refer to the ICU message format documentation for all available. formats
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.time(new Date(2019, 3, 24, 23, 45))}</div>
<div>{$_.time(new Date(2019, 3, 24, 23, 45), 'medium')}</div>
_.date
function(date: Date, format?: string, locale?: string)
Formats a date object into a string with the specified format (short
, medium
, long
, full
). Please refer to the ICU message format documentation for all available. formats
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.date(new Date(2019, 3, 24, 23, 45))}</div>
<div>{$_.date(new Date(2019, 3, 24, 23, 45), 'medium')}</div>
_.number
function(number: Number, locale?: string)
Formats a number with the specified locale
<script>
import { _ } from 'svelte-i18n'
</script>
<div>{$_.number(100000000)}</div>
<div>{$_.number(100000000, 'pt')}</div>