Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
53 lines (34 sloc) 2.19 KB

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 get newly 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.

Learn more about the enterprise offering