1.1.2 • Published 5 years ago
mil-i18next v1.1.2
\<mil-i18next>
'mil-i18next' is a javascript mixin that implements i18next in webcomponents and litElements. It provides translation upfront and lazy-loading and automatic language detection.
Usage
Install from npm
npm install --save mil-i18next
Import to your webcomponent
import { i18nMixin } from "mil-i18next";
Extend your class
class myClass extends i18nMixin(...)
Optionally override default properties
constructor() {
super();
this.i18NextNs = ["app", "common", "notification"];
this.i18NextFilePath = '/path to translation files/{{lng}}/{{ns}}.json'
this.i18NextFallbackLng = "fr";
this.i18NextDefaultNS = ["app"];
this.i18NextDebug = true;
this.i18NextResources = {
en: {
app: {
key1: "Translations keyed here will be loaded before i18next renders",
key2: "Use language files for lazy-loading",
}
},
fr: {
app: {
key1: "Les valeurs saisies ici seront chargées avant l'initialisation d'i18next",
key2: "Les valeurs qui peuvent être chargées sans bloquer l'initialisation doivent être saisies dans les fichiers de traduction.",
}
}
};
}
Properties reflect i18next configuration options
Property | Type | i18next Option | Default |
---|---|---|---|
i18NextNs | Array | ns | 'app' |
i18NextFilePath | String | languageResources | '/assets/locales/{{lng}}/{{ns}}.json' |
i18NextFallbackLng | String | fallbackLng | 'en' |
i18NextDefaultNS | String | defaultNS | 'app' |
i18NextDebug | Boolean | debug | false |
i18NextResources | Object | resources | {} |
Translation file load is asynchronous. Any translations that can be lazy-loaded should be keyed in translation files. this.i18NextFilePath
must be updated accordingly. To avoid unpleasant text flashing, all other translations should be keyed in this.i18NextResources
Use in your element
${this.i18n.t("app:key1")}