Introduction
What is react-i18next?
react-i18next is a powerful internationalization framework for React / React Native which is based on i18next.
{% hint style="info" %} You should read the i18next documentation. The configuration options and translation functionalities like plurals, formatting, interpolation, ... are documented there. {% endhint %}
The module provides multiple components eg. to assert that needed translations get loaded or that your content gets rendered when the language changes.
react-i18next is optimally suited for server-side rendering. It provides extra extension point to work with next.js, for e.g. Learn more.
As react-i18next depends on i18next you can use it in any other UI framework and on the server-side (node.js, .net, ...) too. Like the React philosophy - just:
Learn once - translate everywhere.
What does my code look like
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 i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message(s). <Link to="/msgs">Go to messages</Link>.
</Trans>
...
If you prefer not using semantic keys but text - that's also possible.
On top: Localization as a service
i18next supports tranlation management tools such as locize.com.
