i18next is a popular internationalization library for JavaScript applications. It provides a comprehensive solution for managing translations and localization in web applications. react-i18next is a React wrapper for i18next, making it easy to integrate i18next with React components. However, there are other internationalization libraries available in the React ecosystem that offer similar functionality.
- react-intl is another internationalization library specifically designed for React applications. It provides components and utilities for formatting dates, numbers, and messages, as well as managing translations and language switching.
To see how i18next compares with react-i18next and react-intl, check out this comparison: Comparing i18next vs react-i18next vs react-intl.
react-i18next 
IMPORTANT:
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
Documentation
The documentation is published on react.i18next.com and PR changes can be supplied here.
The general i18next documentation is published on www.i18next.com 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>
<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>
...
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
Installation
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.
Examples
v9 samples
Requirements
- react >= 16.8.0
- react-dom >= 16.8.0
- react-native >= 0.59.0
- i18next >= 10.0.0 (typescript users: >=17.0.9)
v9
Core Contributors
Thanks goes to these wonderful people (emoji key):
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 original provided to you by the maintainers of i18next!
By using locize you directly support the future of i18next and react-i18next.
