To create a multi-language application with Reactjs, we will use a library called “i18next”.

i18next is an internationalization framework written in and for JavaScript. But it’s much more than that. It provides you with a complete solution to localize your product from web to mobile and desktop.

Here is a step-by-step guide:

1. First, install the necessary libraries:

You can install them using npm or yarn.

```
npm install i18next i18next-http-backend react-i18next
```
or
```
yarn add i18next i18next-http-backend react-i18next
```

1. Create a new folder named ‘locales’ in your src folder and add two more folders inside it for languages(like ‘en’ for English, ‘de’ for German). Then, create a json file(named ‘translation.json’) inside each of these folder with key-value pairs.

For example,

en/translation.json

```
{ “Welcome”: “Welcome“
}
```

de/translation.json

```
{ “Welcome”: “Willkommen“
}
```

1. Configure i18next

Set up the i18next config file. Let’s name it ‘i18nextConfig.js’ and save it in the src folder.

```
import i18n from “i18next”;
import { initReactI18next } from “react-i18next”;
import Backend from “i18next-http-backend”;

i18n .use(Backend) .use(initReactI18next) .init({ lng: “en”, fallbackLng: “en”, interpolation: { escapeValue: false }, react: { useSuspense: false } });

export default i18n;
```

Here, the “lng” key in the init method is used for the default language.

1. Use the configured function in your app

Import the above configuration into your root component file (like App.js or index.js).

```
import ‘./i18nextConfig’;
```

1. Localize your content

You can use the useTranslation hook or the withTranslation higher order component to load the translation function into your component.

```
import React from “react”;
import { useTranslation } from “react-i18next”;

function MyComponent() { const { t, i18n } = useTranslation();

const changeLanguage = (lng) => { i18n.changeLanguage(lng); } return (

{t(‘Welcome’)}

); }

export default MyComponent;
```

In this example, when you click the button, it changes the language of your application. The ‘t’ function is used to translate your content.

That’s it. Now your application should support multiple languages.

How to make a multi-language application with Reactjs?

{t(‘Welcome’)}