How to Build a Multi-Language App with React and i18n Library

In today’s globalized world, it’s essential to make your app accessible to people speaking different languages. Building a multi-language app can significantly enhance its reach and make it more inclusive. However, creating a multi-language app can be a challenging task, particularly if you’re using a complex framework like React.

Fortunately, React developers can use the i18n library to translate their apps into different languages easily. The i18n library provides a straightforward and effective way to manage translations, making it an ideal solution for React developers looking to create a multi-language app.

Using the i18n library, React developers can efficiently translate the text in their app into different languages without having to manage multiple copies of the codebase. This approach reduces the complexity of the codebase and makes it easier to maintain and update the app in the future.

The i18n library supports various translation file formats, making it easy to create and manage translations for different languages. Additionally, it provides a range of features and functionalities that help React developers manage translations efficiently.

Overall, the i18n library is a powerful tool that can help React developers build accessible and inclusive apps. In the following sections, we’ll discuss how to set up a React app with i18n, create language files, and implement i18n in the app. We’ll also cover best practices for using i18n in React and provide examples of how to switch between languages in the app.

Understanding i18n and React

Internationalization, or i18n, refers to the process of adapting software to different languages and cultures. It involves translating user interfaces, data, and other content to make them accessible to users worldwide. The i18n library is a tool that helps developers manage translations in their apps efficiently.

React is a popular JavaScript library used for building user interfaces. It provides a flexible and efficient way to create complex UIs, making it a popular choice for building web applications. When it comes to building multi-language apps with React, developers can use the i18n library to manage translations effectively.

The i18n library helps in translating different languages in React apps by providing a set of functions that developers can use to manage translations. These functions enable developers to define translation keys, create language files, and retrieve translations in their React components.

One of the most popular i18n libraries used with React is react-i18next. This library provides a range of features, including support for pluralization and interpolation, which are essential for managing translations in complex apps.

Here’s an example of how to use the react-i18next library to translate a simple React component:

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

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

  return <h1>{t('greeting')}</h1>;
}

In this example, the useTranslation hook is used to retrieve the t function, which is used to retrieve the translated text for the greeting key.

Other i18n libraries that can be used with React include react-intl and i18next. Both of these libraries provide a range of features and functionalities that make it easy to manage translations in React apps.

Overall, understanding i18n and how it can be used with React is essential for building accessible and inclusive apps. In the next sections, we’ll discuss how to set up a React app with i18n and create language files.

Setting up a React app with i18n

Before setting up a React app with the i18n library, you’ll need to install Node.js and React on your machine. Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a browser, while React is a JavaScript library used for building user interfaces.

Once you have Node.js and React installed, you can follow these steps to set up a new React app with the i18n library:

Open your terminal or command prompt and navigate to the directory where you want to create your new React app.
Run the following command to create a new React app:

npx create-react-app my-app

This command will create a new React app named “my-app” in the current directory.

Navigate to the “my-app” directory:

cd my-app

Install the i18next and react-i18next libraries:

npm install i18next react-i18next

Create a new folder named “locales” in the “src” directory:

mkdir src/locales

Inside the “locales” folder, create a new file named “en.json”. This file will contain the English translations for your app:

touch src/locales/en.json

Open the “en.json” file and add some translations:

{
  "greeting": "Hello, world!",
  "description": "This is a multi-language React app."
}

Create a new file named “i18n.js” in the “src” directory:

touch src/i18n.js

Open the “i18n.js” file and add the following code:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslation from './locales/en.json';

const resources = {
  en: {
    translation: enTranslation
  }
};

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

export default i18n;

This code sets up the i18n library with the English translations in the “en.json” file.

Import the “i18n” object in your React components:

import React from 'react';
import { useTranslation } from 'react-i18next';
import './App.css';
import i18n from './i18n';

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

  return (
    <div className="App">
      <header className="App-header">
        <h1>{t('greeting')}</h1>
        <p>{t('description')}</p>
        <button onClick={() => i18n.changeLanguage('fr')}>Français</button>
        <button onClick={() => i18n.changeLanguage('es')}>Español</button>
      </header>
    </div>
  );
}

export default App;

In this code, the useTranslation hook is used to retrieve the t function, which is used to retrieve the translated text. Two buttons are also added to switch between different languages.

That’s it! You have now set up a new React app with the i18n library and added support for English translations. You can add additional translations by creating new language files in the “locales” folder and updating the resources object in the “i18n.js” file.

One thing to note is that the lng option in the init method specifies the default language for your app. In this example, the default language is set to English. The fallbackLng option specifies the fallback language to use if a translation is not available for the user’s preferred language.

You can also use the i18n library to format numbers, dates, and times in a way that is appropriate for the user’s language and region. For example, you can use the i18n.language property to retrieve the user’s preferred language and pass it to the toLocaleString method to format a number or date:

const formattedNumber = new Intl.NumberFormat(i18n.language).format(1234.56);
const formattedDate = new Date().toLocaleDateString(i18n.language);

In summary, setting up a React app with the i18n library involves installing the library, creating language files, setting up the i18n object, and using the useTranslation hook to retrieve translated text in your components. You can also use the i18n library to format numbers and dates based on the user’s language and region.

Creating language files

Once you have set up the i18n library in your React app, you can create language files that contain translations for your app’s content. The i18n library supports several formats for language files, including JSON, YAML, and PO files. In this example, we will use JSON format.

To create a language file, create a new file in the “public/locales” directory with the name of the language and the “.json” extension. For example, to create a Spanish language file, create a file called “es.json” in the “public/locales” directory. The content of the file should be a JSON object that maps translation keys to translated text. Here is an example of a Spanish language file:

{
  "welcome": "Bienvenido a mi aplicación",
  "about": "Acerca de",
  "contact": "Contacto"
}

In this example, the translation keys are “welcome”, “about”, and “contact”, and the translated text is in Spanish.

You can create language files for as many languages as you want to support in your app. To switch the language in your app, you can use the i18n.changeLanguage method and pass in the language code. For example, to switch to the Spanish language, you can call i18n.changeLanguage("es").

In addition to JSON format, the i18n library also supports other formats such as YAML and PO files. YAML files are similar to JSON files, but use a more human-readable format. PO files are a standard format used for translations in GNU gettext and other translation tools.

Here is an example of a YAML language file for French:

welcome: Bienvenue dans mon application
about: À propos
contact: Contact

And here is an example of a PO language file for German:

msgid ""
msgstr ""
"Content-Type: text/plain; charset=UTF-8\n"
"Language: de_DE\n"

msgid "welcome"
msgstr "Willkommen in meiner App"

msgid "about"
msgstr "Über"

msgid "contact"
msgstr "Kontakt"

In summary, creating language files for your React app using the i18n library involves creating files with translation keys and translated text in the desired language format, and storing them in the “public/locales” directory. The i18n library supports several language file formats, including JSON, YAML, and PO files.

Implementing i18n in the app

Once you have set up the i18n library and created language files, you can start using i18n functions in your React app. The i18n library provides several functions for translating text, formatting numbers and dates, and retrieving the user’s preferred language.

To use i18n functions in your app, you can use the useTranslation hook, which provides a t function for translating text. Here is an example of using the t function in a component:

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

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

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("about")}</p>
      <a href="/contact">{t("contact")}</a>
    </div>
  );
}

export default App;

In this example, the useTranslation hook is used to retrieve the t function, which is used to translate the text in the component. The t function takes a translation key as an argument and returns the translated text for the user’s preferred language.

You can also use i18n functions to format numbers and dates in a way that is appropriate for the user’s language and region. Here is an example of formatting a number using the i18n.language property:

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

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

  const formattedNumber = new Intl.NumberFormat(i18n.language).format(1234.56);

  return (
    <div>
      <p>{formattedNumber}</p>
    </div>
  );
}

export default App;

In addition to reducing the complexity of your code, using i18n in your React app has several benefits, such as making your app more accessible to users who speak different languages, and making it easier to maintain and update translations.

In summary, implementing i18n in your React app involves using i18n functions such as useTranslation and t to translate text and format numbers and dates. Using i18n in your app can reduce the complexity of your code and make your app more accessible to users who speak different languages.

Using i18n in React components

Using i18n in React components is straightforward and involves using the useTranslation hook or the withTranslation higher-order component to access the i18n functions.

Here is an example of using the useTranslation hook to translate text in a React component:

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

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

  return (
    <h1>{t("greeting")}</h1>
  );
}

export default Greeting;

In this example, the useTranslation hook is used to access the t function, which is used to translate the greeting key in the component.

Alternatively, you can use the withTranslation higher-order component to access the t function. Here is an example of using withTranslation to translate text in a React component:

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

class Greeting extends React.Component {
  render() {
    const { t } = this.props;

    return (
      <h1>{t("greeting")}</h1>
    );
  }
}

export default withTranslation()(Greeting);

In this example, the withTranslation higher-order component is used to wrap the Greeting component and pass the t function as a prop to the component.

You can use i18n functions to translate text in different components, such as buttons, links, and forms. Here is an example of using the t function to translate a button label:

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

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

  return (
    <button>{t("submit")}</button>
  );
}

export default SubmitButton;

In this example, the t function is used to translate the submit key, which is used as the label for the button.

In summary, using i18n in React components involves using the useTranslation hook or the withTranslation higher-order component to access the i18n functions. You can use i18n functions to translate text in different components, such as buttons, links, and forms. Using i18n in React components makes it easier to maintain and update translations and improves the accessibility of your app to users who speak different languages.

Switching between languages

Enabling language switching in a React app using i18n involves creating a language switcher component that allows users to select the language they want to use.

Here is an example of creating a language switcher component using the useTranslation hook:

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

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  function handleLanguageChange(event) {
    i18n.changeLanguage(event.target.value);
  }

  return (
    <select onChange={handleLanguageChange} value={i18n.language}>
      <option value="en">English</option>
      <option value="fr">French</option>
      <option value="es">Spanish</option>
    </select>
  );
}

export default LanguageSwitcher;

In this example, the useTranslation hook is used to access the i18n object, which has a changeLanguage function that can be used to change the language of the app. The handleLanguageChange function is used to handle the language selection event, and the value of the select element is set to the current language using the i18n.language property.

To enable language switching, you can render the LanguageSwitcher component in a header or footer component that is present on all pages of the app. This allows users to switch between languages at any point while using the app.

Allowing users to switch between languages improves the accessibility of your app and makes it easier for users who speak different languages to use your app. It also allows users to switch to a language they are more comfortable with, which can improve their overall experience with your app.

In summary, enabling language switching in a React app using i18n involves creating a language switcher component that allows users to select the language they want to use. This component can be rendered in a header or footer component that is present on all pages of the app. Allowing users to switch between languages improves the accessibility of your app and makes it easier for users who speak different languages to use your app.

Best practices for i18n in React

Here are some best practices for using i18n in React apps:

Plan and organize the translation process: Before starting the translation process, it is important to plan and organize it properly. This includes identifying the content that needs to be translated, creating a list of languages that need to be supported, and selecting a translation tool that is compatible with the i18n library being used.
Use clear and concise language: When creating content for translation, it is important to use clear and concise language that is easily translatable. Avoid using complex language, idioms, or cultural references that may not be understood by people who speak different languages.
Separate code and content: To make the translation process easier, it is important to separate code and content. This involves keeping all translatable content, such as text and images, in separate files or database tables. This allows translators to work on the content without needing access to the code.
Use language codes consistently: It is important to use language codes consistently throughout the app. This involves using the same language code in all language files, and using standard language codes such as ISO-639-1 or ISO-639-2.
Test the app in all supported languages: Before launching the app, it is important to test it in all supported languages to ensure that all translations are accurate and the app is functioning as expected.

Here is an example of how to organize language files for different languages using the i18n library:

locales/
  en/
    translation.json
  fr/
    translation.json
  es/
    translation.json

In this example, the locales directory contains subdirectories for each supported language, such as en for English, fr for French, and es for Spanish. Each language subdirectory contains a translation.json file that contains translations for all translatable content in the app.

Using i18n in a consistent and organized manner helps ensure that the app is accessible to people who speak different languages. By following these best practices, you can create a more inclusive and user-friendly app that appeals to a wider audience.

Conclusion

In conclusion, this blog post discussed the process of building a multi-language app with React and i18n library. We covered the basics of i18n, how to set up a React app with i18n, how to create language files, how to implement i18n in the app, how to use i18n in React components, and how to enable language switching. Additionally, we provided some best practices for using i18n in React apps.

Using i18n library in React apps is crucial to make them accessible to people speaking different languages. It helps improve the user experience and expands the reach of your app to a wider audience. With i18n, developers can easily translate text and other content in their app to different languages without having to rewrite their code.

We encourage all React developers to implement i18n in their apps and use the best practices mentioned in this post. This will not only improve the accessibility of their app but also make it more user-friendly for people speaking different languages. By creating more inclusive and accessible apps, we can build a better digital world for everyone.