@lion/localize

The localization system helps to manage localization data split into locales and automate its loading

Usage no npm install needed!

<script type="module">
  import lionLocalize from 'https://cdn.skypack.dev/@lion/localize';
</script>

README

Systems >> Localize >> Overview ||10

Is meant to translate text into multiple languages. In it's simplest form it is a function that returns the translated text for a namespace + key.

Features

  • Uses es modules
  • Formatting of numbers, amounts
  • Formatting of dates

Further examples and a more in depth description can be found at the Features Page.

Content

Feature Description
Translate Text Load and translate text in multiple languages
Format Numbers Format numbers in multiple languages
Format Dates Format dates in multiple languages

Installation

npm i --save @lion/localize

import { localize } from '@lion/localize';

Example

The locale which will be loaded by default is accessed via the localize.locale.

The single source of truth for page's locale is <html lang="my-LOCALE">. At the same time the interaction should happen via localize.locale getter/setter to be able to notify and react to the change.

import { localize } from '@lion/localize.js';

localize.addEventListener('localeChanged', () => {
  // do smth when data is loaded for a new locale
});

// changes locale, syncs to `<html lang="es-ES">` and fires the event above
localize.locale = 'es-ES';