https://github.com/gpmcadam/eighteen
Simple i18n library for React
https://github.com/gpmcadam/eighteen
internationalisation internationalization javascript nodejs react reactjs translation
Last synced: 4 months ago
JSON representation
Simple i18n library for React
- Host: GitHub
- URL: https://github.com/gpmcadam/eighteen
- Owner: gpmcadam
- Created: 2017-12-10T23:09:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-10T23:10:10.000Z (almost 8 years ago)
- Last Synced: 2025-05-12T14:26:05.374Z (5 months ago)
- Topics: internationalisation, internationalization, javascript, nodejs, react, reactjs, translation
- Language: JavaScript
- Size: 49.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eighteen
A simple, elegant, i18n library for ReactJS.
## Principles
Eighteen is written to get out of your way, make internationalisation of your
React apps easy, and keep your code readable.
It's light, and has no dependencies.
## Get Started
Install Eighteen:
`npm install --save eighteen`
Configure:
```
import Eighteen from 'eighteen';
Eighteen.configure({
locales: {
'fr-FR': {
'Hello': 'Bonjour'
}
}
});
```
Use:
```
import { Text } from 'eighteen';
class MyComponent extends Component {
render() {
return (
Hello
);
// Renders:
// Bonjour
}
}
```
## Configuration
`Eighteen.configure` takes the following options.
### `locales` (Object)
An object, where each key is the locale identifier (e.g. `en-GB`) and the values are a key-value list of translations.
Translations are keyed by the default translation, and the value is the locale-specific translation. For example, if your default translation is `en-GB`, your `fr-FR` configuration might look like this:
```
locales: {
'fr-FR': {
'Hello': 'Bonjour'
}
}
```
### `defaultLocale` (string)
The default locale key to use when a `locale` prop is not passed to the `Test` component.
## Advanced Formatting
You can provided advanced formatting for your translations by providing an `args` which replaces the format indicators in the order they are given.
```
You have %s new message(s)
// You have 1 new message(s)
```