Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
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.
Higher-order components and components for React when using i18next.
Source can be loaded via npm, bower or downloaded from this repo.
# npm package
$ npm install react-i18next
# bower
$ bower install react-i18next
window.reactI18next
NEWS: localization as a service - locize.com
Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!
With using locize you directly support the future of i18next and react-i18next.
It will add your i18n instance in context.
import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import App from './App'; // your entry page
import i18n from './i18n'; // initialized i18next instance
ReactDOM.render(
<I18nextProvider i18n={ i18n }><App /></I18nextProvider>,
document.getElementById('app')
);
You can safely set escapeValue to false in interpolation options as react take care of escaping, see the sample.
translate(namespaces, options): higher-order component to wrap a translatable component.
defaultNS
){ withRef: true }
to options store a ref to the wrapped component instance making it available via getWrappedInstance()
method{ translateFuncName: 'someFunctionName' }
will change the name of the property passed to the child component for the translation function (by default, the value is t
). This is useful if you are already using a concrete function name for extracting the translation chains from your source filesoptions:
{
withRef: false, // store a ref to the wrapped component
translateFuncName: 't', // will change the name of translation prop default 't'
wait: false, // delay rendering until translations are loaded - wait can be set globally on i18next init too ( can be set on i18next.init({ react: { wait: true }};) too)
nsMode: 'default', // can be set to fallback to let passed namespaces treated as fallbacks in order passed - wait can be set globally on i18next init too ( can be set on i18next.init({ react: { nsMode: 'fallback' }};) too)
bindI18n: 'languageChanged loaded', // which events trigger a rerender, can be set to false or string of events
bindStore: 'added removed' // which events on store trigger a rerender, can be set to false or string of events
}
import React from 'react';
import { translate } from 'react-i18next';
function TranslatableView(props) {
const { t } = props;
return (
<div>
<h1>{t('keyFromDefault')}</h1>
<p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
</div>
)
}
export default translate(['defaultNamespace', 'anotherNamespace'])(TranslatableView);
// short for only loading one namespace:
// export default translate('defaultNamespace')(TranslatableView);
You can set options.wait to true per options in hoc or globally on i18next.init if you want to delay rendering until translation files are loaded:
import React from 'react';
import { translate } from 'react-i18next';
function TranslatableView(props) {
const { t } = props;
return (
<div>
<h1>{t('keyFromDefault')}</h1>
<p>{t('anotherNamespace:key.from.another.namespace', { /* options t options */ })}</p>
</div>
)
}
export default translate(['defaultNamespace', 'anotherNamespace'], { wait: true })(TranslatableView);
getWrappedInstance(): allows you to access to the component instance, wrapped into translate()
.
Only available if you pass { withRef: true }
to the translate()
options.
import React, { Component } from 'react';
import { translate } from 'react-i18next';
class TranslatableView extends Component {
foo() {
// do something important
}
render() {
const { t } = this.props;
return (
<div>
<h1>{t('keyFromDefault')}</h1>
</div>
)
}
}
export default translate(['defaultNamespace', 'anotherNamespace'], { withRef: true })(TranslatableView);
import React, { Component } from 'react';
import ./TranslatableView;
class App extends Component {
handleClick() {
this.refs.translatedView.foo();
}
render() {
return (
<div>
<TranslatableView ref="translatedView" />
<button onClick={() => this.handleClick()}>Click</button>
</div>
)
}
}
Interpolate: component that allows to interpolate React Components or other props into translations.
props:
useDangerouslySetInnerHTML={true}
onlymy value with {{replaceMe}} interpolation
) {
"interpolateSample": "you <strong>can</strong> interpolate {{value}} or {{component}} via interpolate component!"
}
import React from 'react';
import { translate, Interpolate } from 'react-i18next';
function TranslatableView(props) {
const { t } = props;
let interpolateComponent = <strong>a interpolated component</strong>;
return (
<div>
<Interpolate i18nKey='ns:interpolateSample' value='"some string"' component={interpolateComponent} />
{/*
=>
<span>
you <strong>can</strong> interpolate "some string" or <strong>a interpolated component</strong> via interpolate component!
</span>
*/}
<Interpolate i18nKey='ns:interpolateSample' useDangerouslySetInnerHTML={true} value='"some string"' component={interpolateComponent} />
{/*
=>
<span>
you <strong>can</strong> interpolate "some string" or <strong>a interpolated component</strong> via interpolate component!
</span>
*/}
</div>
)
}
You can use formatting, see the sample.
loadNamespaces: Function that will pre-load all namespaces used by your components. Works well with react-router
match
function
props:
import { I18nextProvider, loadNamespaces } from 'react-i18next';
import { match } from 'react-router';
match({...matchArguments}, (error, redirectLocation, renderProps) => {
loadNamespaces({ ...renderProps, i18n: i18nInstance })
.then(()=>{
// All i18n namespaces required to render this route are loaded
})
});
When using i18next-express-middleware, you can use req.i18n
as the i18next
instance for I18nextProvider
:
import { I18nextProvider } from 'react-i18next';
import i18n from './i18next'; // your own initialized i18next instance
import App from './app';
app.use((req, res) => {
const component = (
<I18nextProvider i18n={req.i18n}>
<App />
</I18nextProvider>
);
// render as desired now ...
});
Full sample/boilerplate for universal rendering.
For Typescript users, if you are running into issues, such as Uncaught TypeError: Cannot read property 'off' of undefined
, it's possible that you have not exported your own initialized i18next instance correctly. Try the following:
import * as i18n from 'i18next'
import * as XHR from 'i18next-xhr-backend'
import * as LanguageDetector from 'i18next-browser-languagedetector'
import config from '../src/config/config'
const instance = i18n
.use(/* your settings */)
.init({
// your settings here
})
export default instance
4.1.0
FAQs
Internationalization for react done right. Using the i18next i18n ecosystem.
The npm package react-i18next receives a total of 2,315,204 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 0 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.