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.
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.
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.
With react-i18next you get a full fledged translation function and some components helping translating nested react components. So you can translate:
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). 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. msgs">Go to messages</Link>.
</Trans>
...
Read the getting started guide to learn more.
Or do a hands on using webpackbin.
See in the video how simple a process could be using the right tools:
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.
While internationalization is more a technical work by providing instrumentation — editors and translator need there own set of tools. With locize 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.
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.