react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem.
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.
How will 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>
...
Why i18next?
- Simplicity: no need to change your webpack configuration or adding additional babel transpilers, just use create-react-app and go
- Production ready we know there are more needs for production than just doing i18n on the clientside. So we offer wider support on serverside too (nodejs, php, ruby, .net, ...). Learn once - translate everywhere.
- Beyond i18n comes with locize bridging the gap between developement and translations - covering the whole translation process.
