react-i18next

What is react-i18next?

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.

What are react-i18next's main functionalities?

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>;
}

Other packages similar to react-i18next

lingui-react

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

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>.

react-translate-component

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

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.

README

react-i18next

Higher-order components and components for React when using i18next.

Installation

Source can be loaded via npm, bower or downloaded from this repo.

# npm package
$ npm install react-i18next

# bower
$ bower install react-i18next

• If you don't use a module loader it will be added to window.reactI18next

Examples

• Example project

Requirements

• react >= 0.14.0
• i18next >= 2.0.0

I18nextProvider

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')
);

Translate HOC

translate(namespaces): higher-order component to wrap a translatable component.

• All given namespaces will be loaded.
• props.t will default to first namespace in array of given namespaces (providing a string as namespace will convert automatically to array)
• used nested inside I18nextProvider (context.i18n)

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);

Interpolate Component

Interpolate: component that allows to interpolate React Components or other props into translations.

• used nested inside I18nextProvider and translation hoc (context.i18n, context.t)

props:

• i18nKey: the key to lookup
• options: options to use for translation (exclude interpolation variables!)
• parent: optional component to wrap translation into (default 'span')
• ...props: values to interpolate into found translation (eg. my value with {{replaceMe}} interpolation)

  {
    "interpolateSample": "you can 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 can interpolate "some string" or <strong>a interpolated component</strong> via interpolate component!
        </span>
      */}
    </div>
  )
}

Changelog

1.1.0

• added WrappedComponent property to translate wrapper PR 15