DEV Community

Cover image for How to integrate i18next Internationalization with your React project?
Brayan Arrieta
Brayan Arrieta

Posted on

How to integrate i18next Internationalization with your React project?

When are working on several projects and countries the language is one of the most important facts that we need to keep in mind, especially if our application was developed with the goal of having an international market.

In some cases handle the internationalization in the projects is difficult and complicated, there are different tools that can be used with different approaches. For that reason with the post, I will explain to you about the react-i18next framework is a useful tool that can help us to integrate internationalization to our React project in a quick and awesome way.

i18next

I18next is an internationalization framework written in and for JavaScript. But it's much more than that. I18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop.

As you can see i18next is a framework that will help us to apply internationalization features to our Javascript projects.

react-i18next

react-i18next is a powerful internationalization framework for React / React Native which is based on i18next. The module provides multiple components eg. to assert that needed translations get loaded or that your content gets rendered when the language changes.

react-i18next is the best option when you want to add internationalization to your React project.

Let's do it

Create React project

First of all, we need to create a React project with the next command

npx create-react-app react-i18next-example
Enter fullscreen mode Exit fullscreen mode

Install dependencies

After that, we need to install the project dependencies

npm install react-i18next i18next --save
Enter fullscreen mode Exit fullscreen mode

As you can see we have installed also i18next when we will use react-i18next the reason is that i18next is the core that provides all translation functionality while react-i18next gives some extra power for proper use in React

Configure

i18n.js

We need to create a new file i18n.js beside our index.js containing the following content

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      "Welcome to React": "Bienvenue Γ  React et react-i18next"
    }
  }
};

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: "en", 
    interpolation: {
      escapeValue: false
    }
  });

  export default i18n;
Enter fullscreen mode Exit fullscreen mode

The interesting part here is by i18n.use(initReactI18next) we pass the i18n instance to react-i18next which will make it available for all the components via the context API.

After that, we need to import the i18n.js file into our index.js file

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './i18n';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

When we that done the previous steps we can start to use react-i18next, for example, we can use the useTranslation hook.

App.js

import "./styles.css";
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
      <h1>{t("Welcome to React")}</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

After that, you will the next page based on the location language English or French

Translate your content with different options

react-i18next offers some different options when we need to use internationalization in our project, some of them are

Using useTranslation hook

Using the hook in functional components is one of the options you got. The t function is the main function in i18next to translate content.

import React from 'react';

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();
  return <h1>{t('Welcome to React')}</h1>
}
Enter fullscreen mode Exit fullscreen mode

Learn more about the hook useTranslation

Using withTranslation HOC

Using higher order components is one of the most used methods to extend existing components by passing additional props to them.

import React from 'react';

import { withTranslation } from 'react-i18next';

const MyComponent = ({ t }) => {
  return <h1>{t('Welcome to React')}</h1>
}

export default withTranslation()(MyComponent);
Enter fullscreen mode Exit fullscreen mode

Learn more about the higher order component withTranslation.

Using the render prop

The render prop enables you to use the t function inside your component.

import React from 'react';
import { Translation } from 'react-i18next';
const MyComponent = () => {
  return (
    <Translation>
      {
        t => <h1>{t('Welcome to React')}</h1>
      }
    </Translation>
  )
}
export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

Learn more about the render prop Translation.

Using the Trans component

The Trans component is the best way to translate a JSX tree into one translation. This enables you to eg. easily translate text containing a link component or formatting like <strong>.

import React from 'react';
import { Trans } from 'react-i18next';

const MyComponent = () => {
  return <Trans><H1>Welcome to React</H1></Trans>
}

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

Note

The translation key and content, in this case, should be declared with the tags as the next example.

"<0>Welcome to React</0>": "<0>Welcome to React and react-i18next</0>"
Enter fullscreen mode Exit fullscreen mode

Interpolation

Interpolation is one of the most used functionalities in I18N. It allows the integration of dynamic values into your translations. Per default, interpolation values get escaped to mitigate XSS attacks.

Example

With i18next we can pass params to our translations that will be integrated with the final translation render to do that we need to add the keys are strings surrounded by curly brackets:

{
    "key": "{{what}} is {{how}}"
}
Enter fullscreen mode Exit fullscreen mode

So when we call that translation we can pass the params to the t function

import "./styles.css";
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
      <h1>{t("key", { what: "interpolation", how: "great" })}</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

You can see the example more detailed here

Edit react-i18next-example-interpolation

Working with data models

Another awesome thing that can be used with interpolation is pass data models, we need to declare the translation key in a next way

{
    "key": "I am {{author.name}}"
}
Enter fullscreen mode Exit fullscreen mode

In the case of the React Component you just need to pass the author data to the interpolation.

import "./styles.css";
import { useTranslation } from "react-i18next";

export default function App() {
  const { t } = useTranslation();
  const author = { 
    name: 'Brayan',
    github: 'Arrieta'
};
  return (
    <div className="App">
      <h1>{t("key", { author })}</h1>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

As you see react-i18next and i18next provides some awesome features that can be used in our projects in the case that our application wants to have an international market.

I hope you find this article really helpful to use internationalization in your React projects. I will be updating this post based on your comments and recommendations so let me know in any case. Thanks! πŸ‘

References

Discussion (3)

Collapse
startfrontend profile image
Info Comment hidden by post author - thread only accessible via permalink
start front end

Thanks for the write-up but many parts of your article is 1:1 copy/paste from the official docs?

Collapse
adrai profile image
Adriano Raiano

Nice…
If you like to unleash more features of i18next, have also a look at: dev.to/adrai/how-to-properly-inter...

Collapse
rxliuli profile image
rxliuli

If necessary, maybe you can take a look at this
npmjs.com/package/@liuli-util/i18n...

Some comments have been hidden by the post's author - find out more