Skip to content

Internationalization for react done right. Using the i18next i18n ecosystem.

License

Notifications You must be signed in to change notification settings

ghengeveld/react-i18next

This branch is 1135 commits behind i18next/react-i18next:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Oct 26, 2018
c075742 Â· Oct 26, 2018
Oct 26, 2018
Oct 26, 2018
Oct 1, 2018
Oct 1, 2018
Dec 13, 2017
Dec 12, 2015
Dec 12, 2015
Jul 28, 2018
Oct 17, 2018
Feb 23, 2016
Apr 1, 2018
Oct 26, 2018
Dec 12, 2015
Oct 26, 2018
Mar 14, 2016
Oct 26, 2018
Jul 30, 2018
Oct 23, 2018
Oct 26, 2018
Oct 26, 2018
Oct 26, 2018
Oct 1, 2018

Repository files navigation

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


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.


About

Internationalization for react done right. Using the i18next i18n ecosystem.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 88.2%
  • HTML 8.7%
  • CSS 2.6%
  • FreeMarker 0.5%