Internationalization (i18n) Management with React

Offering support for multiple languages in your web application can significantly enhance the user experience. Enabling Internationalization (i18n) in React applications not only ensures users see content in their preferred language, but also provides benefits during the process of going global. In this article, we will discuss i18n management with React.

Why Internationalization (i18n)?

In a globalizing world, enabling users to receive services in their own language is a big advantage. i18n increases user satisfaction by creating software tailored to different languages and cultures. At the same time, it allows you to respond better to your target market.

Using i18n in React Applications

A popular library for i18n management in React is react-i18next. This library allows user interfaces to be dynamically translated into different languages. Now, let's take a step-by-step look at how to set up and use this library.

Installation

To add the react-i18next library to your React project, you first need to install the necessary packages:

npm install react-i18next i18next

Library Configuration

You can follow the steps below to configure the library in your project:

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

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: {
          "welcome": "Welcome to our application!"
        }
      },
      tr: {
        translation: {
          "welcome": "Uygulamamıza Hoşgeldiniz!"
        }
      }
    },
    lng: "en", // Default language
    fallbackLng: "en",
    interpolation: {
      escapeValue: false // React already safes from xss
    }
  });

Usage

Afterwards, you can define a language switching function to switch between languages:

const changeLanguage = (lng) => {
  i18n.changeLanguage(lng);
};

After performing the language change, you can use your content with i18n as you create your component:

import { useTranslation } from 'react-i18next';

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

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

Conclusion

Ensuring Internationalization (i18n) in React applications is an important step to enhance the user experience. Thanks to the react-i18next library, providing content in different languages becomes quite easy. i18n, which provides a significant advantage for expanding into global markets, is also of great importance in terms of increasing user satisfaction.