Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
November 19, 2020 08:18
August 13, 2020 12:33
November 29, 2023 11:09
December 28, 2020 09:23
June 12, 2023 12:30
March 6, 2019 10:15
December 12, 2015 15:46
June 12, 2023 18:06
January 17, 2019 10:04
May 18, 2023 23:00
September 3, 2023 12:12
November 28, 2023 15:13
November 28, 2023 15:13
June 12, 2023 12:30
November 11, 2023 00:02

react-i18next Tweet

CircleCI Code Climate Coverage Status Quality npm


Master Branch is the newest version using hooks (>= v10).

$ >=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 and PR changes can be supplied here.

The general i18next documentation is published on and PR changes can be supplied here.

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

Do you like to read a more complete step by step tutorial?

Here you'll find a simple tutorial on how to best use react-i18next. Some basics of i18next and some cool possibilities on how to optimize your localization workflow.


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

Jan Mühlemann

💻 💡 👀 📖 💬

Adriano Raiano

💻 💡 👀 📖 💬

Pedro Durek

💻 💡 👀 💬

Tiger Abrodi

💻 👀

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

Gold Sponsors

localization as a service -

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


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