@weavedev/lit-i18next
Usage
Install
npm install --save @weavedev/lit-i18next
Initialization
import { i18next } from '@weavedev/lit-i18next';
import { LitElement } from 'lit';
class MyApp extends LitElment {
i18nInit = i18next.init({
...options
});
protected async performUpdate(): Promise<unknown> {
await this.i18nInit;
return super.performUpdate();
}
}
Implementation
TypeScript (Decorator)
import { localized, t } from '@weavedev/lit-i18next';
import { LitElement, html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('my-element')
@localized({...options})
class MyElement extends LitElement {
protected render(): TemplateResult {
return html`<b>${t('path.to.translation_key')}</b>`;
}
}
JavaScript
import { t, updateWhenLocaleChanges } from '@weavedev/lit-i18next';
import { LitElement, html } from 'lit';
class MyElement extends LitElement {
constructor() {
super();
updateWhenLocaleChanges(this, {
...options
});
}
render() {
return html`<b>${t('path.to.translation_key')}</b>!`;
}
}
customElements.define('my-element', MyElement);
Options
Options can be passed optionally to the localized
decorator or the updateWhenLocaleChanges
callback.
type Event = 'added' | 'initialized' | 'languageChanged' | 'loaded';
type LocalizeOptions = {
event?: Event | Event[]; // Event or events which will trigger a rerender
};
License
This project is released under the MIT license.