https://github.com/syu93/translit
A simple really small i18n library with intuitive API.
https://github.com/syu93/translit
i18n internationalisation lit-element lit-i18n pluralisation translate translation translit
Last synced: 7 months ago
JSON representation
A simple really small i18n library with intuitive API.
- Host: GitHub
- URL: https://github.com/syu93/translit
- Owner: syu93
- Created: 2020-04-25T16:36:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:28:46.000Z (over 2 years ago)
- Last Synced: 2025-02-26T00:04:24.751Z (7 months ago)
- Topics: i18n, internationalisation, lit-element, lit-i18n, pluralisation, translate, translation, translit
- Language: JavaScript
- Homepage:
- Size: 659 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Translit
A simple really small i18n library with intuitive API.
## Features
* Dependency free
* Really small
* Compatible with Web Components and **LitElement**
## Install
```bash
$ npm i @syu93/translit
```
## Usage
```javascript
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
```javascript
import Translit from '@syu93/translit';
const i18n = new Translit({
translation: {
// ...
},
locale: 'en'
});
```
Or you can dynamically change the locale using the `setLocale` method
```javascript
i18n.setLocale('fr');
```
Or you can even set the locale as you use it
```javascript
i18n.t('hello.wold', null, 'en');
```
You can as well load another locale with the `addLocale` method
```javascript
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.
```javascript
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.
```javascript
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
```javascript
render() {
return html`
${this.t('text.hi')}
`;
}
```
## 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.