Miss any of our Open RFC calls?Watch the recordings here! »

@syu93/translit

1.1.0 • Public • Published

Translit

A simple really small i18n library with intuitive API.

size version

Features

  • Dependency free
  • Really small
  • Compatible with Web Components and LitElement

Install

$ npm i @syu93/translit

Usage

import Translit from '@syu93/translit';
 
const i18n = new Translit({
  translation: {
    en: {
      hello: {
        world: 'Hello world'
      },
      itemInList: (count) => `This list contains ${count} item${count > 1 ? 's' : ''}.`
    }
  } 
});
 
console.log(i18n.t('hello.world'))
// => Hello world

Locales

By default Translit define the locale as English en .

You can change the locale in the constructor

import Translit from '@syu93/translit';
 
const i18n = new Translit({
  translation: {
      // ...
  },
  locale: 'en'
});

Or you can dynamically change the locale using the setLocale method

i18n.setLocale('fr');

Or you can even set the locale as you use it

i18n.t('hello.wold', null, 'en');

You can as well load another locale with the addLocale method

i18n.addLocale({
  fr: {
    hello : {
      world: 'Bonjour à tous'
    }
  }
});

Simple translation

Define a JSON of translation and use the path as a string to access the translation.

const i18n = new Translit({
  translation: {
    en: {
      hello: {
        world: 'Hello world'
      }
    }
  } 
});
 
console.log(i18n.t('hello.world'));
// => Hello world

Pluralisation

If you need a more complex translation, with pluralisation for example, you can simple define a method that takes a param and return a string.

const i18n = new Translit({
  translation: {
    en: {
      itemInList: (count) => `This list contains ${count} item${count > 1 ? 's' : ''}.`
    }
  } 
});
 
console.log(i18n.t('itemInList', 1));
// => This list contains 1 item
 
console.log(i18n.t('itemInList', 2));
// => This list contains 2 items

LitElement

To use Translit inside a LitElement, just call the this.t method inside your template

render() {
    return html`
        <section>
            <p>${this.t('text.hi')}</p>
        </section>
    `;
}

API

Translit( config : Object )

  • Translation : An object containing the translation.
  • Locale : The current locale used for translation.

setLocale( locale : String )

Locale : The language string.

Dynamically change the locale translation.

addLocale( translation : Object )

Translation : A translation object.

Dynamically add a new translation.

t( translation : String, data : Any, locale : String )

Translation : A string representing the path for the translation. Data : The data to be passed the translate function. Locale : The locale of the translation (override the default locale).

Translate a given string from the translation object.

Install

npm i @syu93/translit

DownloadsWeekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

11.5 kB

Total Files

7

Last publish

Collaborators

  • avatar