Implement multi-languages in React

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

  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

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.

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.

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
zh-Hant.json

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

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

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
HelloWorld.js
ThankYou.js
ReactExample.js
App.js

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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *