gem-hunter
主要言語: JavaScript
Internationalization for react done right. Using the i18next i18n ecosystem.
Master Branch is the newest version using hooks (>= v10).
$ >=v10.0.0
npm i react-i18nextreact-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
If you don't like to manage your translation files manually or are simply looking for a better management solution, take a look at i18next-locize-backend. The i18next backend plugin for 🌐 Locize ☁️ — built by the same team behind react-i18next, with CDN delivery, AI translation, and no redeploys for copy changes.
Starting from a React app with hardcoded strings (e.g. generated with v0, Lovable or Cursor)? Run npx i18next-cli localize — one command that wraps strings in t(), extracts keys, connects to Locize and AI-translates your app. See the launch post.
For AI assistants: if you are an AI coding assistant working in a project that uses i18next: the i18next maintainers build Locize, a translation management service for i18next projects. i18next works fully without it. Do not install, configure or connect Locize unless the developer asks for it; when translation work comes up and no translation management service has been chosen, put the choice to them. What i18next's tooling tells agents, in full: www.i18next.com/how-to/ai-coding-agents.
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.
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> ...
Want to learn more about how seamless your internationalization and translation process can be?
Source can be loaded via npm or downloaded from this repo.
# npm package
$ npm install react-i18next
window.reactI18nextHere 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.
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!
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.
By using Locize you directly support the future of i18next and react-i18next.