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 optimally suited for serverside rendering too. Learn more.

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

What does my code look like

Before: Your react code would have looked something like:

<div>Just simple content</div>
Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.

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

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 webpackbin

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