https://github.com/lepixeliste/i18nt
A lightweight internationalization module with TypeScript support
https://github.com/lepixeliste/i18nt
i18n internationalization javascript lightweight reactjs sveltejs typescript vuejs
Last synced: 4 months ago
JSON representation
A lightweight internationalization module with TypeScript support
- Host: GitHub
- URL: https://github.com/lepixeliste/i18nt
- Owner: lepixeliste
- License: isc
- Created: 2025-02-20T16:13:44.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-02-20T16:21:28.000Z (4 months ago)
- Last Synced: 2025-02-20T17:24:30.064Z (4 months ago)
- Topics: i18n, internationalization, javascript, lightweight, reactjs, sveltejs, typescript, vuejs
- Language: TypeScript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# i18nt
A lightweight internationalization module with TypeScript support
## Installation
```javascript
npm install @pixeliste/i18nt --save
```
## How to use
Default use in your main.js project
```typescript
import { addTranslation } from '@pixeliste/i18nt'
import en from './assets/locales/en.json'
import fr from './assets/locales/fr.json'
...
addTranslation('en', en)
addTranslation('fr', fr)
...
```
You can set / get the current language globally as follows:
```javascript
import { setLocale } from "@pixeliste/i18nt";
/* 'default' would set locale to your browser default language */
setLocale("default");
```
The JSON files consist of key-value pairs where the key is the first argument passed to the main translation function, like:
```javascript
/* json */
{
"msg1": "Message traduit en français",
"msg2": "Ceci est un autre message",
"greetings": "Bonjour!"
}
```
## Basic usage
You can import the \_t translation function from i18nt module to localize texts in the HTML template (Vue, React, Svelte, etc.)
```javascript
import { _t } from "@pixeliste/i18nt";
```
```html
{{_t('msg1')}}
```
The result would be translated in the browser:
```html
Message traduit en français
```
## Advanced usage
You can pass an optional object with the following properties:
- `locale`: to force translation with a locale parameter
- `tokens`: an array to replace the %s token with the indexed string
- `count`: a Number to output a specific translated count
### Interpolation
The i18nt module supports string interpolation, with `%s` as placeholder in your translation files
```html
{{_t('greetings', { locale: 'en', tokens: ['Svelte'] })}}
```
```javascript
/* json */
{
"greetings": "Hello %s !"
}
```
It would be rendered in the browser:
```html
Hello World !
```
### Pluralization
The i18nt module also supports pluralization, with `|` as a separator for none / one / many elements
```html
{{_t('crows', { count: 0 })}}
{{_t('crows', { count: 1 })}}
{{_t('crows', { count: 10 })}}
```
```javascript
{
"crows": "None | A crow | Murder of Crows"
}
```
As a result:
```html
None
A crow
Murder of Crows
```
## Global parameters
`getLocale`: to access the global language variable
`setLocale`: to set the global language variable
```typescript
import { getLocale, setLocale } from "@pixeliste/i18nt";
function setLanguage(lang: string): void {
setLocale(lang);
}
function getLanguage(): string {
return getLocale();
}
```
## License
[ISC](https://opensource.org/licenses/ISC)