Skip to content

I18n and Localization

Fred Chien edited this page Oct 31, 2015 · 8 revisions

Translations

All of translation are stored in the ./src/translations, developer and translator can just work on for multiple language support. Remember to run webpack to update settings after modified files.

Translating with React Component

You can found a React component I18n out there:

import I18n from 'Extension/I18n.jsx';

Replace a string with translation by using React Component:

<I18n sign='header.menu.settings'>Settings</I18n>

Replace with specific format:

<I18n sign='foo.welcome' args={[ 'Fred', 'Stacy' ]}>Hello %s and %s!</I18n>

Translating with Inline Method

You might have a component which requires the text as property value. For this, load and attach @i18n decorator to the class for being able to use i18n methods.

import { i18n } from 'Decorator';

@i18n
class MyComponent extends React.Component {
    // ...
}
<Input placeholder={this.i18n.getMessage('sign_in.email', 'E-mail address')} />

With specific format:

<Input placeholder={this.i18n.getFmtMessage('foo.welcome', 'Hello %s and %s!', 'Fred', 'Stacy')} />