![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
react-i18next
Advanced tools
Package description
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.
Changelog
12.3.1
Readme
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 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>
...
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.reactI18next
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.
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.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.
The npm package react-i18next receives a total of 3,377,737 weekly downloads. As such, react-i18next popularity was classified as popular.
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.