react-i18next-gitbook's Introduction

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.