Permalink
Switch branches/tags
Nothing to show
Find file Copy path
b5cd1b4 Nov 29, 2018
2 contributors

Users who have contributed to this file

@jamuhl @iabotsiTC
143 lines (99 sloc) 4.19 KB

Getting started

Installation

Install using npm

react-i18next can be added to your project using npm:

# npm
$ npm install react-i18next --save

The default export is UMD compatible (commonjs, requirejs, global).

In the /dist folder you find additional builds for commonjs, es6 modules.

{% hint style="info" %} The module is optimized to load by webpack, rollup, ... The correct entry points are already configured in the package.json. There should be no extra setup needed to get the best build option. {% endhint %}

Load from CDN

You can also add a script tag to load react-i18next from one of the CDNs providing it, eg.:

unpkg.com

Translation "how to"

{% hint style="info" %} You should read the i18next documentation at some point as we do not repeat all the configuration options and translation functionalities like plurals, formatting, interpolation, ... here. {% endhint %}

You got two options to translate your content:

Simple content

Simple content can easily be translated using the provided t function.

Before:

<div>Just simple content</div>

After:

<div>{t('simpleContent')}</div>

{% hint style="info" %} You will get the t function by using the NamespacesConsumer render prop or withNamespaces hoc. {% endhint %}

JSX tree

Sometimes you might want to include html formatting or components like links into your translations. (Always try to get the best result for your translators - the final string to translate should be a complete sentence).

Before: Your react code would have looked something like:

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

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

{% hint style="info" %} Learn more about the Trans Component here {% endhint %}

Basic sample

This basic sample tries to add i18n in a one file sample.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import i18n from "i18next";
import { withI18n, reactI18nextModule } from "react-i18next";

i18n
  .use(reactI18nextModule) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: {
          "Welcome to React": "Welcome to React and react-i18next"
        }
      }
    },
    lng: "en",
    fallbackLng: "en",

    interpolation: {
      escapeValue: false
    }
  });

class App extends Component {
  render() {
    const { t } = this.props;

    return <h2>{t('Welcome to React')}</h2>;
  }
}
const AppWithI18n = withI18n()(App); // pass `t` function to App

// append app to dom
ReactDOM.render(
  <AppWithI18n />,
  document.getElementById("root")
);

RESULT:

Preview of content

{% hint style="info" %} This sample while very simple does come with some drawbacks to getting the full potential from using react-i18next you should read the extended step by step guide. {% endhint %}

Extended samples

{% hint style="success" %} For complete code and samples: have a look at the samples (react, react-native, nextjs, ...).

Or have a look at the interactive codesandbox. {% endhint %}