Implement multi-languages in React

by Clue Mediator · January 17, 2021

Today, we will show you how to implement multi-languages in React. Sometimes you may need to add multi-language support to a website or a react web application like English, Chinese, etc.

In this article, we’ll use the react-i18next internationalization framework for React App which is based on i18next.

Demo Application

We will create a multilingual sample application as shown below.

Output - Implement multi-languages in React - Clue Mediator — Output – Implement multi-languages in React – Clue Mediator

Steps to implement multi-languages in React

Create a react app
Install dependencies
Add translation files
Configure the i18next
Initialize the i18next configuration
Translate component using react-i18next
Output

File Structure

react-multi-lingual
- node_modules
- public
  - assets
    - i18n
      - translations
        en.json
        zh-Hant.json
- src
  - components
    - HelloWorld.js
    - LangSelector.js
    - ReactExample.js
    - ThankYou.js
  - App.js
  - i18n.js
  - index.css
  - index.js
- package-lock.json
- package.json

1. Create a react app

First of all, we will create a simple react application using the create-react-app npm package. Run the following command to create a react app.

npx create-react-app react-multi-lingual

1	npx create-react-app react-multi-lingual

Check the following link for more information.

Create a react application

2. Install dependencies

To integrate multi-languages in the react app, we have to install the react-i18next packages. Run the following command to install the dependencies.

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save

1	npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector --save

3. Add translation files

Now, we have to add the following translation files in the public/assets/i18n/translations/ folder. You have to create directories for the translation files.

en.json

{
  "HELLO_WORLD": "Hello World!",
  "REACT_EXAMPLE": "This is a react example ({{count}}).",
  "THANK_YOU": "Thank you!"
}

{

"HELLO_WORLD": "Hello World!",

"REACT_EXAMPLE": "This is a react example ({{count}}).",

"THANK_YOU": "Thank you!"

}

zh-Hant.json

{
  "HELLO_WORLD": "你好，世界！",
  "REACT_EXAMPLE": "這是一個反應示例（{{count}}）。",
  "THANK_YOU": "謝謝！"
}

{

"HELLO_WORLD": "你好，世界！",

"REACT_EXAMPLE": "這是一個反應示例（{{count}}）。",

"THANK_YOU": "謝謝！"

}

4. Configure the i18next

In this step, we will create the i18next initiation script. Let’s create a file named i18n.js under the src/ directory.

i18n.js

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

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
  // learn more: https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    lng: 'en',
    backend: {
      /* translation file path */
      loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'
    },
    fallbackLng: 'en',
    debug: true,
    /* can have multiple namespace, in case you want to divide a huge translation into smaller pieces and load them on demand */
    ns: ['translations'],
    defaultNS: 'translations',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
      formatSeparator: ','
    },
    react: {
      wait: true
    }
  });

export default i18n;

import i18n from 'i18next';

import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';

import LanguageDetector from 'i18next-browser-languagedetector';

i18n

// load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)

// learn more: https://github.com/i18next/i18next-http-backend

.use(Backend)

// detect user language

// learn more: https://github.com/i18next/i18next-browser-languageDetector

.use(LanguageDetector)

// pass the i18n instance to react-i18next.

.use(initReactI18next)

// init i18next

// for all options read: https://www.i18next.com/overview/configuration-options

.init({

lng: 'en',

backend: {

/* translation file path */

loadPath: '/assets/i18n/{{ns}}/{{lng}}.json'

fallbackLng: 'en',

debug: true,

/* can have multiple namespace, in case you want to divide a huge translation into smaller pieces and load them on demand */

ns: ['translations'],

defaultNS: 'translations',

keySeparator: false,

interpolation: {

escapeValue: false,

formatSeparator: ','

react: {

wait: true

}

});

export default i18n;

5. Initialize the i18next configuration

In this step, we will import the i18n.js in the Index.js file to initialize the i18next configuration. Here, we have to use the suspense component because i18next load resource files asynchronously and we have to wait until the loading is completed.

Index.js

import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import './i18n';

ReactDOM.render(
  <React.StrictMode>
    <Suspense fallback={<span>Loading...</span>}>
      <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

import React, { Suspense } from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import './i18n';

ReactDOM.render(

<React.StrictMode>

<Suspense fallback={<span>Loading...</span>}>

<App />

</Suspense>

</React.StrictMode>,

document.getElementById('root')

);

6. Translate component using react-i18next

Let’s create three components for the demonstration under src/components/ directory.

HelloWorld.js – Translate the component using the hooks.
ThankYou.js – Use the HOC to translate the component.
ReactExample.js – Use the Trans component to translate the complex react component.

We will also create a LangSelector.js component to manage the language selection for the react application.

LangSelector.js

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';

const LangSelector = () => {
  const { i18n } = useTranslation();
  const [selectedLang, setSelectedLang] = useState('en');

  const changeLanguage = (event) => {
    setSelectedLang(event.target.value);
    i18n.changeLanguage(event.target.value);
  }

  return (
    <div onChange={changeLanguage}>
      <label className="mr10"><input type="radio" value="en" name="language" checked={selectedLang === 'en'} /> English</label>
      <label><input type="radio" value="zh-Hant" name="language" checked={selectedLang === 'zh-Hant'} /> Chinese (Traditional)</label>
    </div>
  )
}

export default LangSelector;

import React, { useState } from 'react';

import { useTranslation } from 'react-i18next';

const LangSelector = () => {

const { i18n } = useTranslation();

const [selectedLang, setSelectedLang] = useState('en');

const changeLanguage = (event) => {

setSelectedLang(event.target.value);

i18n.changeLanguage(event.target.value);

}

return (

<label className="mr10"><input type="radio" value="en" name="language" checked={selectedLang === 'en'} /> English</label>

<label><input type="radio" value="zh-Hant" name="language" checked={selectedLang === 'zh-Hant'} /> Chinese (Traditional)</label>

</div>

)

}

export default LangSelector;

HelloWorld.js

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

const HelloWorld = () => {
  const { t } = useTranslation();

  return (
    <div>
      <b>{t('HELLO_WORLD')}</b>
    </div>
  )
}

export default HelloWorld;

import React from 'react';

import { useTranslation } from 'react-i18next';

const HelloWorld = () => {

const { t } = useTranslation();

return (

<div>

<b>{t('HELLO_WORLD')}</b>

</div>

)

}

export default HelloWorld;

ThankYou.js

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

const ThankYou = ({ t }) => {
  return (
    <div className="tks">
      <i>{t('THANK_YOU')}</i>
    </div>
  )
}

export default withTranslation()(ThankYou);

import React from 'react';

import { withTranslation } from 'react-i18next';

const ThankYou = ({ t }) => {

return (

<i>{t('THANK_YOU')}</i>

</div>

)

}

export default withTranslation()(ThankYou);

ReactExample.js

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

const ReactExample = () => {
  return (
    <div>
      <Trans count="3">REACT_EXAMPLE</Trans>
    </div>
  )
}

export default withTranslation()(ReactExample);

import React from 'react';

import { Trans, withTranslation } from 'react-i18next';

const ReactExample = () => {

return (

<div>

<Trans count="3">REACT_EXAMPLE</Trans>

</div>

)

}

export default withTranslation()(ReactExample);

App.js

import React from 'react'
import HelloWorld from './components/HelloWorld';
import LangSelector from './components/LangSelector';
import ReactExample from './components/ReactExample';
import ThankYou from './components/ThankYou';

function App() {
  return (
    <React.Fragment>
      <h3>Implement multi-languages in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <LangSelector />
      <div className="app">
        <HelloWorld />
        <ReactExample />
        <ThankYou />
      </div>
    </React.Fragment>
  );
}

export default App;

import React from 'react'

import HelloWorld from './components/HelloWorld';

import LangSelector from './components/LangSelector';

import ReactExample from './components/ReactExample';

import ThankYou from './components/ThankYou';

function App() {

return (

<React.Fragment>

<h3>Implement multi-languages in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>

</div>

</React.Fragment>

);

}

export default App;

7. Output

Run the react application and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

Github Repository StackBlitz Project

If you found value in this article,
you can support us by buying me a coffee! ☕

Implement multi-languages in React

Demo Application

Steps to implement multi-languages in React

File Structure

1. Create a react app

2. Install dependencies

3. Add translation files

4. Configure the i18next

5. Initialize the i18next configuration

6. Translate component using react-i18next

7. Output

Demo & Source Code

You may also like...

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Join us

Implement multi-languages in React

Demo Application

Steps to implement multi-languages in React

File Structure

1. Create a react app

2. Install dependencies

3. Add translation files

4. Configure the i18next

5. Initialize the i18next configuration

6. Translate component using react-i18next

7. Output

Demo & Source Code

You may also like...

Multiple useReducer Hook in React

Image zoom in ReactJS

How to pass values to the onClick function in React

Validate Image Content in ReactJS

Integrate stripe payment gateway in React

Add Multiple Custom Markers to Google Maps in ReactJS

Leave a Reply Cancel reply

Search your query

JOIN OUR NEWSLETTER

Recent Posts

Tags

Join us