Introduction

What is react-i18next?

react-i18next is an internationalization addon for reactjs / reactnative and is based on i18next.

{% hint style="info" %} You should read the i18next documentation at some point as we do not repeat all the configuration options or translation functionalities like plurals, formatting, interpolation, ... {% endhint %}

The module asserts that needed translations get loaded for your components and that your content gets rerendered on language changes.

Based on the zero dependencies and build tools react-i18next is optimal suited for serverside rendering too. Learn more.

{% hint style="info" %} If your app is very simple and there is:

• No need to trigger rerender on language change
• No need for lazy loading namespaces
• No use case for the Trans component

You can just use i18next directly (import it - init somewhere - and use i18next.t) {% endhint %}

As react-i18next builds on i18next you can use it on any other UI framework or on the server (node.js) too. As react philosophy - but: Learn once - translate everywhere.

watch the video

How does my code look like

Basic string translation

Before:

<div>Just simple content</div>

After:

<div>{t('simpleContent')}</div>

Using Trans component for complexer component interpolation

Before: Your react code would have looked something like:

<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:

<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 for your content but prefer using your content - that's also possible.

Or have a look at the interactive playground at codesandbox.io

On top: Localization as a service

It even provides with locize.com a own translation management tool - localization as a service offering.

Learn more about the enterprise offering