What is react-i18next?

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

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, ...

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.

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)

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.

video

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