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.

How will my code look like?

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

Have a look at the interactive playground at webpackbin.

watch the video

Documentation

The documentation is published on react.i18next.com

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 webpack2
• Example webpack1
• Example react-native
• Example expo.io
• Example next.js
• Example razzle
• Example hashbase / beaker browser
• Example storybook
• Example locize.com

Requirements

• react >= 0.14.0
• i18next >= 2.0.0

---

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.

---

Changelog

5.0.0

• [BREAKING] we no longer accept wait to be specified on i18next init options like { wait: true } -> all overrides for the translate hoc now have to be in child react like { react: { wait: true } }
• you now can override all the default options for translate hoc by setting them on i18next.init (excluding translateFuncName as we need that upfront to define childContextTypes)

i18next.init({
  // ... other options
  react: {
    wait: false,
    withRef: false,
    bindI18n: 'languageChanged loaded',
    bindStore: 'added removed',
    nsMode: 'default'
  }
});

• you now can override all defaults for translate hoc options (including translateFuncName) by using:

import translate from 'react-i18next';

translate.setDefaults({
  wait: false,
  withRef: false,
  bindI18n: 'languageChanged loaded',
  bindStore: 'added removed',
  nsMode: 'default',
  translateFuncName: 't'
});