Get your react.js application translated with style…

3 min readJul 6, 2017

Life gets simpler…

While getting started using react.js got a lot simpler this days by using tools like create-react-app or next.js for serverside rendering translating your react.js application is still a problem that leaves a lot of question marks.

Which i18n framework should i choose?
How do i get translators involved?
Beside the code how do we solve the process which mainly consists of non-technical tasks?

Which framework to choose?

There are a lot of internationalization frameworks to choose from. The most well known might be react-intl followed by react-i18next which is based on i18next. And for sure there are endless other options to get your react application translated.

As owner of the i18next, react-i18next open source repositories — i just can speak for the highlights of the i18next ecosystem. For me personally while react-i18next provides all the goodies a react-intl provides the main point i would highlight for i18next would be: learn once — translate everywhere. While currently our hearth beats for react.js and we love using it. There will be other frameworks in the future for sure — so will be i18next.

Show me some code

With react-i18next you get a full fledged translation function and some components helping translating nested react components. So you can translate:

Existing components
Inline content
Attributes / component properties
Error messages passed through redux, …
Just everything…

Before: Your react code would have looked something like:

...
<div>Just simple content</div>
<div>
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...

After: With the trans component just change it to:

...
<div>{t('simpleContent')}</div>
<Trans count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...

Read the getting started guide to learn more.

Or do a hands on using webpackbin.

How react-i18next makes your translation process simpler

See in the video how simple a process could be using the right tools:

-> for developers

While most i18n frameworks for react gone the path of adding additional complexity by needing to change webpack / babel configurations there is no need for that in react-i18next. Also there is no need to add a translations extraction plugin to your build process (while you can do so — it’s not needed).

react-i18next takes benefit of the saveMissing feature of i18next — that way every not yet translated content get passed to the backend server and saved there for future translations.

So there is not more to do than add new components use the t function or Trans component to instrument your code to be translatable. Hit save - reload you application - all the content to be translated is ready for the translators or for reviewing terminology.

-> for editors, translators

While internationalization is more a technical work by providing instrumentation — editors and translator need there own set of tools. With locize.com we provide such tooling.

Locize is the addon layer to i18next which provides you with the translation management part. For all the neat features check out the website or signup for a free trial.

Using locize editors and translator can use an incontext editor to translate or change content. All those changes get published directly and are shown in the application immediately. Does the translations fit into the place where they are shown — no problem with locize and react-i18next.

Need more detailed samples

There are a growing number of best practice samples on the react-i18next repository

If running into any trouble setting up your project we will be there to help you getting started.