https://github.com/lecheshirecat/i18nt
A lightweight internationalization module with TypeScript support
https://github.com/lecheshirecat/i18nt
i18n internationalization javascript javascript-library locale locales-translation react svelte translation typescript typescript-library vue
Last synced: 3 months ago
JSON representation
A lightweight internationalization module with TypeScript support
- Host: GitHub
- URL: https://github.com/lecheshirecat/i18nt
- Owner: lecheshirecat
- License: isc
- Created: 2022-02-08T20:24:48.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-01T13:12:39.000Z (about 1 year ago)
- Last Synced: 2025-01-15T06:22:57.676Z (5 months ago)
- Topics: i18n, internationalization, javascript, javascript-library, locale, locales-translation, react, svelte, translation, typescript, typescript-library, vue
- Language: TypeScript
- Homepage:
- Size: 15.6 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 @cheshirecat/i18nt --save
```
## How to use
Default use in your main.js project
```typescript
import { addTranslation } from '@cheshirecat/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 "@cheshirecat/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 "@cheshirecat/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 Svelte !
```
### 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 "@cheshirecat/i18nt";
function setLanguage(lang: string): void {
setLocale(lang);
}
function getLanguage(): string {
return getLocale();
}
```
## License
[ISC](https://opensource.org/licenses/ISC)