How to Localize Your React App with i18next

Localization is an essential aspect of developing a globally accessible application. It enables your app to support multiple languages, allowing users to interact with it in their preferred language. In this tutorial, we will explore how to localize a React app using the i18next library, a powerful and flexible solution for internationalization.

Prerequisites

• A basic understanding of React
• Node.js and npm installed on your system
• A React app to localize (you can create one using npx create-react-app my-app)

Getting Started

1. Install i18next and react-i18next

To get started, you need to install the i18next and react-i18next libraries as dependencies. Run the following command in your React app's root directory:

npm install i18next react-i18next

2. Create a translation file

Create a new folder named locales in your src directory. Inside the locales folder, create a subfolder for each language you want to support, like en for English and es for Spanish. In each language folder, create a translation.json file that contains key-value pairs for translated strings.

For example, create the following structure:

src/locales/en/translation.json
src/locales/es/translation.json

Add some sample translations to each file:

src/locales/en/translation.json:

{
  "welcome": "Welcome to our app!",
  "language": "Language"
}

src/locales/es/translation.json:

{
  "welcome": "¡Bienvenido a nuestra aplicación!",
  "language": "Idioma"
}

3. Configure i18next

Create a new file named i18n.js in the src directory and configure i18next as follows:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./locales/en/translation.json";
import es from "./locales/es/translation.json";

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

export default i18n;

This configuration initializes i18next with the translation files we created earlier and sets the default language to English.

4. Import i18n.js

Import the i18n.js file in your src/index.js to enable i18next in your app:

import './i18n';

5. Use the useTranslation hook

In your components, use the useTranslation hook from react-i18next to access translated strings:

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

const App = () => {
  const { t, i18n } = useTranslation();

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('en')}>{t('language')} - English</button>
      <button onClick={() => changeLanguage('es')}>{t('language')} - Español</button>
    </div>
  );
};

export default App;

Now your app should display the translated strings based on the selected language.

Conclusion

In this tutorial, we've walked you through the process of localizing a React app using the i18next library. By following these steps, you can easily create a multilingual application that caters to a global audience.

Remember to keep your translation files up-to-date as your app grows and evolves, ensuring that all new features and components are localized for each supported language.

Happy coding!