react-i18next
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|---|---|---|---|---|
@babel/runtime | 7.24.5 | 256.12 kB | MIT | prod | |
html-parse-stringify | 3.0.1 | 10.42 kB | MIT | prod | |
i18next | 23.11.3 | 620.48 kB | MIT | prod peer | |
react | 18.3.1 | 310.65 kB | MIT | prod peer |
React-i18next is an internationalization framework for React applications, which is part of the larger i18next ecosystem. This popular npm package assists developers in effectively managing translations within their React projects, thus making them accessible to a global audience. Leveraging the power of i18next, react-i18next simplifies the complex task of translating your application into multiple languages. It supports standard web i18n features such as plurals, context, interpolation, and formatting, as well as the more advanced features i18next provides.
You can begin using react-i18next by installing it via npm. If you're using the most recent version (version 10 or higher), you can run npm i react-i18next
.
For the legacy version (version 9), you need to run npm i react-i18next@legacy
.
After installing the package, you can then import it into your application:
import { useTranslation } from 'react-i18next';
To use the useTranslation
hook to translate text, you should first define your translations. Then in your React component, you can use the t
function to access these translations, like so:
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return <h1>{t('Welcome to React')}</h1>;
}
You can also use the <Trans>
component to embed dynamic content within your translations:
import React from 'react';
import { Trans } from 'react-i18next';
function MyComponent() {
return (
<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>
);
}
This simple syntax allows for efficient and manageable localization of your React applications.
The react-i18next documentation is available at react.i18next.com. The docs cover in detail how to effectively use the package for internationalizing your React applications. The general i18next documentation is also available at www.i18next.com. More specific documentation changes can be presented through pull requests at their respective GitHub repositories. Learning resources and community examples can also be found in the documentation, providing a thorough understanding of how to achieve efficient localization with React and react-i18next.