React I18next

Internationalization for react done right. Using the i18next i18n ecosystem.
Alternatives To React I18next
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Formatjs13,9257,9803,7487 days ago321November 14, 202339TypeScript
The monorepo home to all of the FormatJS related libraries, most notably react-intl.
React I18next8,6101,3073,525a day ago297November 15, 202314mitJavaScript
Internationalization for react done right. Using the i18next i18n ecosystem.
Vue I18n7,14522 months ago4May 11, 2022242mitJavaScript
:globe_with_meridians: Internationalization plugin for Vue.js
I18next7,1054,6954,813a day ago454November 28, 202320mitJavaScript
i18next: learn once - translate everywhere
Globalize4,7671,1153669 months ago70August 02, 2021143mitJavaScript
A JavaScript library for internationalization and localization that leverages the official Unicode CLDR JSON data
Js Lingui3,98447132a day ago99September 14, 202335mitTypeScript
🌍 📖 A readable, automated, and optimized (3 kb) internationalization for JavaScript
Weblate3,921101a day ago116November 22, 2023440gpl-3.0Python
Web based localization tool with tight version control integration.
Fbt3,8303913 days ago62April 13, 202255mitJavaScript
A JavaScript Internationalization Framework
Kiwi2,387312a month ago8August 18, 202214TypeScript
🐤 Kiwi-国际化翻译全流程解决方案
Icu2,2981,791520a day ago61October 30, 202378otherC++
The home of the ICU project source code.
Alternatives To React I18next
Select To Compare


Alternative Project Comparisons
Readme

react-i18next Tweet

CircleCI Code Climate Coverage Status Quality npm

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.

ecosystem

Localization workflow

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

video

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


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

locize

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


Popular I18n Projects
Popular Internationalization Projects
Popular Data Processing Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Reactjs
Translation
I18n
Translate
Ssr
Internationalization
Preact