Localization
Localization allows to configure multiple locales with local message configurations
- Pluralization
- Date formatting
- Number formatting
- Relative time formatting
About
This is a key string
1 item
30 minutes from now
11/21/24, 6:44 AM
$123.45
Dynamic pluralization with signals
in 3 days
import { i18n } from '@thewebformula/lithe';
/* Set locale
* Defaults to browser if not set
* You can use language only locale 'en' and 'en-US'
*/
i18n.setLocale('en-US');
// turn on cache. This will load and save data to localStorage
i18n.cache();
// Load local messages
i18n.addTranslation('en', en);
i18n.addTranslation('es', es);
<!-- Use i18n method to translate keys -->
<div>${i18n('About')}</div>
<div>${i18n('key_string')}</div>
<!-- Use i18n.format method to handle individual formatting -->
<div>${page.count} ${i18n.format('itemPlural', page.count)}</div>
<!-- Use message variables and formatters: "time_from_now": "$1 $minutesCardinal($1) from now" -->
<div>${i18n('time_from_now', page.time)}</div>
<div>${i18n('date_key', page.date)}</div>
<div>${i18n('currency_key', page.currency)}</div>
<div>
<div class="mc-font-title-medium">Dynamic pluralization with signals</div>
<mc-textfield label="${i18n('Label days')}" type="number" value="${page.days}"
oninput="page.days.value = this.value"></mc-textfield>
<div>${i18n('relativeTime_key', page.days)}</div>
</div>
<!-- Attribute binding -->
<mc-textfield i18n-attr="label" label="Label days" value="${page.days}" oninput="page.days = this.value"></mc-textfield>
<!-- Attribute binding multiple -->
<div i18n-attr="one,two" one="one" two="two"></div>
// en
// type configuration
{ "formatters": {
"itemPlural": {
"type": "cardinal",
"zero": "items",
"one": "item",
"two": "items",
"few": "items",
"many": "items",
"other": "items" },
"placeOrdinal": {
"type": "ordinal",
"one": "st",
"two": "nd",
"few": "rd",
"other": "th" },
"minutesCardinal": {
"type": "cardinal",
"one": "minute",
"other": "minutes" },
"dateFormat": {
"type": "date",
"options": {
"dateStyle": "short",
"timeStyle": "short" } },
"currencyFormat": {
"type": "number",
"options": {
"style": "currency",
"currency": "USD" } },
"relativeTimeFormat": {
"type": "relativeTime",
"unit": "day",
"options": {
"style": "short" } } },
"messages": {
"About": "About",
"Label days": "Label days",
"key_string": "This is a key string",
"time_from_now": "$1 $minutesCardinal($1) from now",
"date_key": "$dateFormat($1)",
"item_count": "$1 $itemPlural($1)",
"place_ordinal": "$1 $placeOrdinal($1)",
"currency_key": "$currencyFormat($1)",
"relativeTime_key": "$relativeTimeFormat($1)" } }
// es
// type configuration
{ "formatters": {
"itemPlural": {
"type": "cardinal",
"zero": "elementos",
"one": "artículo",
"two": "elementos",
"few": "elementos",
"many": "elementos",
"other": "elementos" },
"placeOrdinal": {
"type": "ordinal",
"one": "er",
"two": "do",
"few": "er",
"other": "to" },
"minutesCardinal": {
"type": "cardinal",
"one": "minuto",
"other": "minutos" },
"dateFormat": {
"type": "date",
"options": {
"dateStyle": "short",
"timeStyle": "short" } },
"currencyFormat": {
"type": "number",
"options": {
"style": "currency",
"currency": "MXN" } },
"relativeTimeFormat": {
"type": "relativeTime",
"unit": "day",
"options": {
"style": "short" } } },
"messages": {
"About": "Acerca de",
"Label days": "Días de etiqueta",
"key_string": "Esta es una cadena clave",
"item_count": "$1 $itemPlural($1)",
"place_ordinal": "$1 $placeOrdinal($1)",
"time_from_now": "$1 $minutesCardinal($1) desde ahora",
"date_key": "$dateFormat($1)",
"currency_key": "$currencyFormat($1)",
"relativeTime_key": "$relativeTimeFormat($1)" } }