react-i18next
Advanced tools
Internationalization for react done right. Using the i18next i18n ecosystem.
The react-i18next package is a powerful internationalization framework for React / React Native which is based on i18next. It provides a way to translate your application into multiple languages, handle plurals and formatting, and manage translations.
Translation
This feature allows you to translate text in your React components using the `t` function provided by the `useTranslation` hook.
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return <p>{t('keyForTranslation')}</p>;
}Language Switching
This feature enables you to switch languages on the fly within your application by calling the `changeLanguage` method.
import { useTranslation } from 'react-i18next';
function ChangeLanguageButton() {
const { i18n } = useTranslation();
return (
<button onClick={() => i18n.changeLanguage('de')}>Change to German</button>
);
}Pluralization
This feature allows you to handle plural forms in translations depending on the count provided.
import { useTranslation } from 'react-i18next';
function MyComponent({ count }) {
const { t } = useTranslation();
return <p>{t('keyForPlural', { count })}</p>;
}Formatting
This feature allows you to format dates, numbers, and other values within your translations.
import { useTranslation } from 'react-i18next';
function MyComponent({ date, number }) {
const { t } = useTranslation();
return (
<div>
<p>{t('formattedDate', { date })}</p>
<p>{t('formattedNumber', { number })}</p>
</div>
);
}Namespaces
This feature allows you to organize your translations into namespaces, making it easier to manage large translation files.
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation('namespace1');
return <p>{t('namespace1:keyForTranslation')}</p>;
}LinguiJS is a readable, automated, and optimized (5 kb) internationalization for JavaScript. It is similar to react-i18next but uses a different API and has its own macro syntax for defining translations.
React Intl is part of FormatJS which provides internationalization support for React applications. It is similar to react-i18next in providing translations and formatting but uses a different API, including components like <FormattedMessage> and <FormattedNumber>.
This package provides a component for React that utilizes the Counterpart translation library. It is less feature-rich compared to react-i18next and is more suitable for simpler applications that do not require advanced features like pluralization or namespace support.
React Localize Redux provides localization support for React/Redux applications. It integrates with Redux for state management of translations and locale data, which is different from react-i18next's approach of using the i18next framework.
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
The documentation is published on react.i18next.com The general i18next documentation is published on www.i18next.com
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.
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 💻 💡 📖 💬 |  Tiger Abrodi 💬 💻 👀 |  Pedro Durek 💻 💡 |
This project follows the all-contributors specification. Contributions of any kind are welcome!
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!
With using locize you directly support the future of i18next and react-i18next.
FAQs
Internationalization for react done right. Using the i18next i18n ecosystem.
We found that react-i18next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.