Repository: i18next/react-i18next

Stars: 9960

README.md Copy Chapter

react-i18next 

[![Quality][quality-badge]][quality-url]
[![npm][npm-dl-badge]][npm-url]

[npm-icon]: https://nodei.co/npm/react-i18next.png?downloads=true
[npm-url]: https://npmjs.org/package/react-i18next
[quality-badge]: https://npm.packagequality.com/shield/react-i18next.svg
[quality-url]: https://packagequality.com/#?package=react-i18next
[npm-dl-badge]: https://img.shields.io/npm/dw/react-i18next

IMPORTANT: Copy Section

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 Copy Section

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? Copy Section

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

📖 What others say Copy Section

- How to properly internationalize a React application using i18next by Adriano Raiano
- I18n with React and i18next via Alligator.io by Danny Hurlburt
- Ultimate Localization of React (Mobx) App with i18next via itnext.io by Viktor Shevchenko
- Internationalization for react done right Using the i18next i18n ecosystem via reactjsexample.com
- How to translate React application with react-i18next via codetain.co by Norbert Suski
- Building i18n with Gatsby via gatsbyjs.org by Samuel Goudie
- Get your react.js application translated with style by Jan Mühlemann
- Translate your expo.io / react-native mobile application by Jan Mühlemann
- You're welcome to share your story...

Why i18next? Copy Section

- 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. Now with a Free plan for your side projects!

!ecosystem

Localization workflow Copy Section

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


watch the video

Installation Copy Section

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? Copy Section

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 Copy Section

- Example react
- React examples with typescript
- Example locize.com

#### v9 samples

- Example react
- Example preact
- Example react-native
- Example expo.io
- Example next.js
- Example razzle
- Example hashbase / beaker browser
- Example storybook
- Example locize.com
- Example test with jest

Requirements Copy Section

- react >= 16.8.0
- react-dom >= 16.8.0
- react-native >= 0.59.0
- i18next >= 10.0.0 (typescript users: >=17.0.9)

#### v9

- react >= 0.14.0 (in case of < v16 or preact you will need to define parent in Trans component or globally in i18next.react options)
- i18next >= 2.0.0

Core Contributors Copy Chapter

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
<tr>
<td align="center"><a href="http://twitter.com/jamuhl"><img src="https://avatars3.githubusercontent.com/u/977772?v=4?s=100" width="100px;" alt=""/><br />_{<b>Jan Mühlemann</b>}</a><br /><a href="https://github.com/i18next/react-i18next/commits?author=jamuhl" title="Code">💻</a> <a href="#example-jamuhl" title="Examples">💡</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Ajamuhl+" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/i18next/react-i18next/commits?author=jamuhl" title="Documentation">📖</a> <a href="#question-jamuhl" title="Answering Questions">💬</a></td>
<td align="center"><a href="http://twitter.com/#!/adrirai"><img src="https://avatars0.githubusercontent.com/u/1086194?v=4?s=100" width="100px;" alt=""/><br />_{<b>Adriano Raiano</b>}</a><br /><a href="https://github.com/i18next/react-i18next/commits?author=adrai" title="Code">💻</a> <a href="#example-adrai" title="Examples">💡</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Aadrai+" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/i18next/react-i18next/commits?author=adrai" title="Documentation">📖</a> <a href="#question-adrai" title="Answering Questions">💬</a></td>
<td align="center"><a href="https://github.com/pedrodurek"><img src="https://avatars1.githubusercontent.com/u/12190482?v=4?s=100" width="100px;" alt=""/><br />_{<b>Pedro Durek</b>}</a><br /><a href="https://github.com/i18next/react-i18next/commits?author=pedrodurek" title="Code">💻</a> <a href="#example-pedrodurek" title="Examples">💡</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Apedrodurek+" title="Reviewed Pull Requests">👀</a> <a href="#question-pedrodurek" title="Answering Questions">💬</a></td>
<td align="center"><a href="https://tigerabrodi.dev/"><img src="https://avatars1.githubusercontent.com/u/49603590?v=4?s=100" width="100px;" alt=""/><br />_{<b>Tiger Abrodi</b>}</a><br /><a href="https://github.com/i18next/react-i18next/commits?author=tigerabrodi" title="Code">💻</a> <a href="https://github.com/i18next/react-i18next/pulls?q=is%3Apr+reviewed-by%3Atigerabrodi" title="Reviewed Pull Requests">👀</a></td>
</tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

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

---

<h3 align="center">Gold Sponsors</h3>

<p align="center">
<a href="https://locize.com/" target="_blank">
<img src="https://raw.githubusercontent.com/i18next/i18next/master/assets/locize_sponsor_240.gif" width="240px">
</a>
</p>

---

localization as a service - Locize

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

Now with a Free plan for small projects! Perfect for hobbyists or getting started.

!Locize

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

---