Internationalization for react done right. Using the i18next i18n ecosystem.
Clone or download
rosskevin TS cleanup (#688)
* add WithNamespaces mocking example Typescript test

* spelling

* ignore vscode settings

* remove test moved to i18next

* prettier:typescript
Latest commit 3ef3622 Jan 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE added react-i18next version information Nov 3, 2018
example update deps Jan 22, 2019
src TS cleanup (#688) Jan 22, 2019
test TS cleanup (#688) Jan 22, 2019
.all-contributorsrc add rosskevin as contributor Jan 11, 2019
.babelrc optimize bundle size for es, cjs Oct 1, 2018
.codeclimate.yml exclude shallowEqual Dec 13, 2017
.editorconfig initial version Dec 12, 2015
.eslintignore initial version Dec 12, 2015
.eslintrc add macro incl tests Jul 28, 2018
.gitignore TS cleanup (#688) Jan 22, 2019
.npmignore move build to npm script Feb 23, 2016
.prettierrc use semicolons in prettier Jan 17, 2019
.travis.yml update travis react versions Dec 31, 2018
CHANGELOG.md try fixing issue with babel runtime spread Jan 22, 2019
LICENSE initial version Dec 12, 2015
README.md Update README.md Jan 22, 2019
bower.json Fix errors in bower.json Mar 14, 2016
hooks.d.ts TS cleanup (#688) Jan 22, 2019
hooks.js try fixing ready algo in hooks Dec 13, 2018
icu.macro.js cleanup Jul 30, 2018
package.json try fixing issue with babel runtime spread Jan 22, 2019
react-i18next.js try fixing issue with babel runtime spread Jan 22, 2019
react-i18next.min.js try fixing issue with babel runtime spread Jan 22, 2019
rollup.config.js Environment optimization with rollup-plugin-replace support Jan 21, 2019
tsconfig.json Sync typescript setup with i18next using dtslint and prettier (no oth… Jan 11, 2019
tslint.json Sync typescript setup with i18next using dtslint and prettier (no oth… Jan 11, 2019

README.md

react-i18next Tweet

Travis CI Code Climate Coverage Status Quality dependencies devdependencies

Documentation

The documentation is published on react.i18next.com

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

Head over to the interactive playground at codesandbox.

📖 What others say

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.

i18next ecossystem

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

Examples

Requirements

Core Contributors

Thanks goes to these wonderful people (emoji key):


Jan Mühlemann

💻 💡 📖 💬

Adriano Raiano

💻 💡 📖 💬

Isaac Hinman

💻 💡 💬

Kevin Ross

💬 💻

Matheus Schettino

💻 💬

This project follows the all-contributors specification. Contributions of any kind 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!

locize

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