@weavedev/lit-i18next
TypeScript icon, indicating that this package has built-in type declarations

2.0.0-rc.0 • Public • Published

npm version Downloads Commitizen friendly License

@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.

Dependents (0)

Package Sidebar

Install

npm i @weavedev/lit-i18next

Weekly Downloads

32

Version

2.0.0-rc.0

License

MIT

Unpacked Size

14.6 kB

Total Files

19

Last publish

Collaborators

  • weavebot
  • pjay
  • gerarts