gpmcadam/eighteen

Simple i18n library for React

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 (
      <Text locale="fr-FR">Hello</Text>
    );
    // Renders:
    // <span>Bonjour</span>
  }
}

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.

<Text args={[ 1 ]}>You have %s new message(s)</Text>
// <span>You have 1 new message(s)</span>

eighteen's Issues

add contribution guidelines

add continuous integration

• automatically run tests, coverage and any build steps on PRs
• automatically run publish to npmjs on build of master

choose a license

logo needed

add badges

• coverage report
• build status
• npmjs link
• others?

util.format not available in browsers

better documentation needed