<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")}