React-i18n: Creating Multilingual Applications

In today's global world, creating applications available in various languages has become a crucial element in reaching a broad user base. React, as one of the most popular libraries for building user interfaces, offers tools and libraries that support the internationalization (i18n) process of applications. In this article, we will discuss what i18n is in the context of React, why it is important, and how it can be implemented in practice.

What is i18n?

Internationalization, also known as i18n (a shorthand for the English word "internationalization," where 18 represents the number of letters between the first and last letter), is the process of adapting an application to handle different languages and regions. In the context of web applications, i18n encompasses aspects such as translating interface texts, adjusting date, number, and currency formats, and other localization specifics.

Why is i18n important?

Internationalization is crucial for several reasons:

1. Increased Reach: Applications available in multiple languages can reach a larger audience worldwide.
2. Improved User Experience: Users often prefer using applications in their native language, which enhances comfort and loyalty to the product.
3. Compliance with Local Regulations: In some countries, there are legal regulations requiring content to be available in the local language.

Implementing i18n in React

React offers several popular libraries for implementing i18n, such as react-i18next, react-intl, and formatjs. In this article, we will focus on react-i18next, which is one of the most commonly used due to its simplicity and rich functionality.

Installing react-i18next

To start, you need to install the react-i18next package along with its dependency i18next:

npm install react-i18next i18next

Configuration

After installation, you need to configure i18next in your application. An example configuration might look like this:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from './locales/en/translation.json';
import translationPL from './locales/pl/translation.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: translationEN },
      pl: { translation: translationPL },
    },
    lng: 'en', // default language
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // react already safeguards from xss
    },
  });

export default i18n;

Using i18n in Components

After configuration, you can use i18next to translate texts in components. For example:

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

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

  return (
    <div>
      <h1>{t('welcome_message')}</h1>
      <p>{t('intro_text')}</p>
    </div>
  );
};

export default Welcome;

The translation files (e.g., translation.json) might look like this:

// en/translation.json
{
  "welcome_message": "Welcome",
  "intro_text": "This is an example of a translated text."
}

// pl/translation.json
{
  "welcome_message": "Witamy",
  "intro_text": "To jest przykład przetłumaczonego tekstu."
}

Adapting the Interface

Internationalization is not just about translating texts, but also about adapting data formats. i18next allows the use of variables and formatting of data such as dates, numbers, or currencies.

For example, we can display a date in the local format:

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

const DateDisplay = ({ date }) => {
  const { t } = useTranslation();

  return <div>{t('date_format', { date: new Date(date) })}</div>;
};

export default DateDisplay;

And the corresponding configuration in the translation files:

// en/translation.json
{
  "date_format": "{{date, MMMM Do YYYY}}"
}

// pl/translation.json
{
  "date_format": "{{date, DD MMMM YYYY}}"
}

Conclusion

Internationalization in React may seem complex, but tools like react-i18next make the process much simpler. With the right configuration and structure of translation files, we can create applications accessible to users from different countries and cultures, which is essential in a globalized world. Remember, well-implemented i18n is not only a benefit for users but also a way to increase the reach and attractiveness of our product on the market.