i18next
react-i18next documentation

Updated 23 days ago

What is react-i18next?

<iframe src="https://ghbtns.com/github-btn.html?user=i18next&repo=react-i18next&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>

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

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.

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

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