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

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v11.7.0

react-i18next alternatives and similar libraries

Based on the "I18n And L10n" category

Do you think we are missing an alternative of react-i18next or a related project?

Add another 'I18n And L10n' Library


react-i18next Tweet

CircleCI Code Climate Coverage Status Quality dependencies devdependencies


Master Branch is the new v10 using hooks.

$ v10.0.0
npm i react-i18next

react-native: To use hooks within react-native, you must use react-native v0.59.0 or higher

For the legacy version please use the v9.x.x Branch

$ v9.0.10 (legacy)
npm i react-i18next@legacy


The documentation is published on react.i18next.com

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

Head over to the interactive playground at codesandbox.

📖 What others say

Why i18next?

  • Simplicity: no need to change your webpack configuration or add 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.


Localization workflow

Want to learn more about how seamless your internationalization and translation process can be?


watch the video


Source can be loaded via npm or downloaded from this repo.

# npm package
$ npm install react-i18next
  • If you don't use a module loader it will be added to window.reactI18next


v9 samples


  • react >= 16.8.0
  • react-dom >= 16.8.0
  • react-native >= 0.59.0
  • i18next >= 10.0.0 (typescript users: >=17.0.9)


Core Contributors

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> Jan Mühlemann💻 💡 📖 💬 Adriano Raiano💻 💡 📖 💬 Isaac Hinman💻 💡 💬 Kevin Ross💬 💻

<!-- markdownlint-enable --> <!-- prettier-ignore-end -->


This project follows the all-contributors specification. Contributions of any kind are welcome!

Gold Sponsors

localization as a service - locize.com

Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!


With using locize you directly support the future of i18next and react-i18next.