Build a Multilingual Translate App with React Hooks & I18NEXT

Table of Contents

1. Introduction
2. Creating the Directory and React App
3. Installing Dependencies
4. Adding Translation Languages
5. Importing i18next and React Suspense
6. Creating the Main Page
7. Handling Button Click Events
8. Changing Text Based on Language Selection
9. Setting Up Translation JSON Files
10. Testing the Translation Application

Article

Introduction

In this tutorial, we will learn how to Create a translation application using React and the i18next library. This application will allow users to translate text into various languages, such as English, Korean, or Chinese. We will be using React hooks and the suspense feature provided by React to enhance the application's performance. So, let's get started!

Creating the Directory and React App

To begin, let's create a new directory for our project. Open your preferred code editor (I recommend using Visual Studio Code), and in the terminal, navigate to the desired location and run the command:

mkdir react-translation-app
cd react-translation-app

Next, let's create the React app by running the command:

npx create-react-app translation-app
cd translation-app

This will create a new React app with the name "translation-app" in a subdirectory called "translation-app".

Installing Dependencies

Now that we have our React app set up, we need to install the dependencies required for our translation application. In the terminal, make sure You are in the root directory of your React app and run the following command:

npm install i18next i18next-react i18next-browser-languagedetector react-i18next

This will install the necessary packages for internationalization and translation functionality.

Adding Translation Languages

Once the dependencies are installed, we can proceed with adding the languages we want to translate our application into. For this example, let's use English, Korean, and Chinese.

To do this, create a new folder inside the "src" folder named "locales". Inside the "locales" folder, create three JSON files named "en.json", "ko.json", and "zh.json". These files will contain the translations for each language.

Importing i18next and React Suspense

To make use of the i18next library and React Suspense, we need to import them into our code. In the "src" folder, create a new file named "i18n.js". In this file, we will configure i18next and set up the language detection.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // Configuration options
  });

export default i18n;

Creating the Main Page

Next, let's create the main page of our translation application. Open the "App.js" file in the "src" folder and replace the existing code with the following:

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

function App() {
  const { t } = useTranslation();

  const handleClick = (language) => {
    // Handle language selection
  };

  return (
    <div className="App">
      <header>
        <h1>{t('heading')}</h1>
      </header>
      <div>
        <button onClick={() => handleClick('en')}>English</button>
        <button onClick={() => handleClick('ko')}>Korean</button>
        <button onClick={() => handleClick('zh')}>Chinese</button>
      </div>
      <p>{t('content')}</p>
      <footer>{t('footer')}</footer>
    </div>
  );
}

export default App;

This code imports the necessary dependencies and sets up the basic structure of our translation application. It includes a header, buttons for language selection, a Paragraph for displaying translated content, and a footer.

Handling Button Click Events

Now, let's implement the logic for handling button click events and changing the language. In the "App.js" file, update the handleClick function as follows:

const handleClick = (language) => {
  i18n.changeLanguage(language);
};

This function uses the i18n object to change the Current language based on the button clicked.

Changing Text Based on Language Selection

To dynamically change the text displayed in our application based on the selected language, we need to modify the translation JSON files. Open the "en.json" file inside the "locales" folder and update the content as follows:

{
  "heading": "Translation App",
  "content": "Welcome to the translation app!",
  "footer": "© 2022 Translation App. All rights reserved."
}

Do the same for the "ko.json" and "zh.json" files, replacing the text with translations in each respective language.

Setting Up Translation JSON Files

In addition to the initial translations, we also need to set up the translation JSON files for the "ko" and "zh" languages. Create new files named "ko.json" and "zh.json" inside the "locales" folder and copy the content from the "en.json" file into each.

Next, translate the text inside each JSON file to the corresponding language. For example, in the "ko.json" file, translate the content to Korean.

Testing the Translation Application

With all the setup complete, we can now test our translation application. Start the React development server by running the command:

npm start

This will open the application in your default browser.

Click on the language buttons to see the text dynamically change based on the selected language.

Congratulations! You have successfully created a translation application using React and i18next.

Highlights

• Learn how to create a translation application using React and i18next.
• Utilize React hooks and React Suspense for enhanced performance.
• Handle button click events to change the language dynamically.
• Display translated text based on the selected language.
• Set up and configure translation JSON files for multiple languages.

FAQ

Q: Can I add more languages to the translation application? A: Yes, you can add as many languages as you want by creating new translation JSON files and updating the language buttons in the main page.

Q: How can I customize the styling of the translation application? A: You can add CSS classes and styles to the HTML elements in the App.js file to customize the look and feel of the application. You can also use CSS-in-JS libraries like styled-components or CSS modules for more advanced styling options.

Q: Is it possible to integrate a translation API for automatic translation? A: Yes, you can integrate translation APIs like Google Translate or Microsoft Translator by making API requests in the handleClick function. You will need to obtain API credentials and handle the translation logic accordingly.

Q: Can I use i18next for server-side rendering? A: Yes, i18next can be used for server-side rendering by integrating it with a server-side framework like Next.js or Gatsby. You will need to set up the necessary configurations and handle the translation data accordingly.

Q: How can I handle pluralization or variable interpolation in translations? A: i18next provides built-in features for handling pluralization and variable interpolation in translations. You can refer to the i18next documentation for more information on how to use these features.

Q: Is i18next suitable for large-Scale applications? A: Yes, i18next is suitable for large-scale applications as it provides a robust and scalable internationalization solution. It supports features like nested translations, namespace management, and language fallbacks, making it well-suited for complex language requirements.