React Intl Editor

I’ve been working on a project that uses the React library for building the front-end components. This application is going to be available in many different languages. In order to handle translating these components into the different languages, we’ve chosen to use Yahoo’s React Intl library.

Quick Intro on React Intl

This library allows you to keep your strings inline with the component code (including contextual descriptions that will be useful to outside translators) and then extract it to separate JSON files in order to be translated.

Example component code:

<div className={classnames('login-email', 'no-padding', formCentered)}>
  <FormattedMessage
    defaultMessage="Email"
    description="Form label for Email"
    id="LoginPage.form-email-placeholder">
    {emailLabelText => (<label>
      {emailLabelText}
      <TextInput
        key={0}
        onChange={ (_, newEmail) => this.setState({ email: newEmail })}
        placeholder={emailLabelText}
        value={email}
      />
    </label>)}
  </FormattedMessage>
</div>

For each component, the library will build a JSON file containing the embedded strings that need translating, like this:

[
{
"id": "LoginPage.form-email-placeholder",
"description": "Form label for Email",
"defaultMessage": "Email"
}
]

Managing the Translations

The next step is to create a flat JSON file for each locale, with the translated strings, like this:

{
  "LoginPage.form-email-placeholder": "Email"
}

The problem is, I couldn’t find a nice way of working with these files if you didn’t know JSON. In my project’s case, these strings would all be approved by either a product owner, and/or an outside translation service – either of which know this particular markup.

So I came up with a quick solution to allow someone to edit these locale files using a web-based interface. I wrote the React Intl Editor in PHP. I realize a tool written in PHP to manage JSON markup might seem odd, but I can write PHP quickly, and I didn’t want to spend a pile of time on this project.

Download React Intl Editor

The editor starts on a summary screen showing you statistics about your project, and which locales are completely translated (or not).

Clicking on the “Matching Strings” or “Missing Strings” in any locale will open an editor allowing you to set the translated values.

When you save the changes, it writes the translated values into the flat JSON file (ex: en-CA.json) that you can then commit back into your React project.

Getting Started

This editor is very much a rough beta, but was enough to get our team started on the translations. You can download the React Intl Editor project from GitHub, and install it on a web server running PHP 5.4+.

Feel free to fork, submit issues, or contribute pull requests.

Thank You! Merci! Gracias!