Introduction
What is react-i18next?
react-i18next is a powerful internationalization framework for reactjs / reactnative 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 serverside rendering. It provides extra extension point to eg. work with next.js. Learn more.
As react-i18next depends on i18next you can use it on any other UI framework and serverside (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. <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 provides with locize.com a own translation management tool.
