Creating a seamless multi-language user interface in React
Tags: javascript, react
Published: 2024-02-28 08:00:00

*This article was originally written by [Muhammed Ali](https://www.honeybadger.io/blog/authors/muhammedali/) on the [Honeybadger Developer Blog](https://www.honeybadger.io/blog/creating-multi-language-user-interface-with-react/).*

React is a popular JavaScript library for building user interfaces. One of the challenges of building an application for a global audience is supporting multiple languages. Fortunately, several libraries are available that make it easy to add multi-language support to a React application. One such library is react-i18next.

In this article, we'll walk through the process of building a weather application with multi-language support using react-i18next. We'll start by creating a basic React application. Then, we'll add multi-language support to our application using react-i18next. The complete project can be found on [GitHub](https://github.com/khabdrick/weather-app).

## Set up the development environment and create a new React project

To get started, open your terminal or command prompt and run the following commands to create a new directory for your project:

```bash
mkdir weather-app
cd weather-app

```

Initialize a new React project using the Create React App command:

```bash
npx create-react-app .

```

Now you can install the necessary packages for our weather app. Open your terminal, navigate to the root directory of your project (`weather-app`), and run the following command:

```bash
npm install axios react-i18next i18next

```

This command will install the Axios library for making HTTP requests to the weather API, as well as the react-i18next and i18next libraries for multi-language support.

## Create the `WeatherApp` component

Now, let's create the main component for our weather app. Create a new file called `WeatherApp.js` in the `src` directory and add the following code, which will do the following:

- Import the necessary dependencies, including React, useState, useEffect from React, Axios for making API requests, useTranslation from react-i18next for translation support,  and i18n from i18next for initializing translations.
- Next, we define the translation resources for different languages by importing translation files from the `locales` directory (this will be created later).
- We initialize `i18n` with the translation resources, default language, and interpolation configuration.
- Inside the `WeatherApp` component, we use the `useTranslation` hook from `react-i18next` to access the translation functions.
- We set up two state variables: `city` to hold the city name entered by the user and `weatherData` to store the fetched weather data.
- The `useEffect` hook is used to fetch the weather data whenever the `city` state changes.
- In the `handleCityChange` function, we update the `city` state with the new city entered by the user.
- Finally, the component renders an input field for entering the city name, as well as the weather data displayed in the chosen language using the translation keys.

```jsx
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useTranslation } from "react-i18next";

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

const resources = {
  en: {
    translation: translationEN,
  },
  fr: {
    translation: translationFR,
  },
  es: {
    translation: translationES,
  },
};

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

const WeatherApp = () => {
  const { t } = useTranslation();
  const [city, setCity] = useState("");
  const [weatherData, setWeatherData] = useState({});

  useEffect(() => {
    const getWeatherData = async () => {
      const res = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=9ba6ce0196b42b189d5a8a33aaa888f9`
      );
      setWeatherData(res.data);
    };
    getWeatherData();
  }, [city]);

  const handleCityChange = async (e) => {
    const newCity = e.target.value;
    setCity(newCity);

  };
  console.log(weatherData)
  return (
    <div>      
      <input type="text" value={city} onChange={handleCityChange} />
      <h2>{t("weather_forcast_for")}: {weatherData.name}</h2>
      <p>{t("current_temperature")}: {weatherData.main?.temp}</p>
      <p>{t("feels_like")}: {weatherData.main?.feels_like}</p>
      <p>{t("humidity")}: {weatherData.main?.humidity}</p>
    </div>
  );
};

export default WeatherApp;
```

## Create translation files

To support multi-language functionality, we need to create translation files for each language. In this tutorial, we will create translation files for English, French, and Spanish. Create the following files in the `src/locales` directory, which will represent the text on the site we would like to have in multiple languages.

`en/translation.json` (For English):

```json
{
  "weather_forcast_for": "Weather forecast for",
  "current_temperature": "Current temperature",
  "feels_like": "Feels like",
  "humidity": "Humidity"
}

```

`fr/translation.json` (For French):

```json
{
  "weather_forcast_for": "Prévisions météo pour",
  "current_temperature": "Température actuelle",
  "feels_like": "Ressenti",
  "humidity": "Humidité"
}

```

`es/translation.json` (For Spanish):

```json
{
  "weather_forcast_for": "Pronóstico del tiempo para",
  "current_temperature": "Temperatura actual",
  "feels_like": "Sensación térmica",
  "humidity": "Humedad"
}

```

These translation files contain the translation key-value pairs for the app's interface in each respective language.

## Wrap the app with `I18nextProvider`

To provide the translation data to our app, we need to wrap the `App` component with the `I18nextProvider` component. Open the `src/index.js` file and replace its contents with the following code. The `I18nextProvider` component accepts a prop called `i18n`, which is an instance of the `i18next` library. This prop is used to pass the translation resources and configuration to the provider.

By wrapping the `App` component with the `I18nextProvider`, the translation functionality becomes available to all the components rendered within the `App` component.

```jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { I18nextProvider } from "react-i18next";
import i18next from "i18next";

i18next.init({
  interpolation: { escapeValue: false }, // React already does escaping
});

ReactDOM.render(
  <React.StrictMode>
    <I18nextProvider i18n={i18next}>
      <App />
    </I18nextProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();
```

## Create the `LanguageSwitcher` Component

Allowing users to switch between different languages requires the creation of a `LanguageSwitcher` component. Create a new file called `LanguageSwitcher.js` in the `src` directory and add the following code:

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

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

  const handleLanguageChange = (e) => {
    const newLang = e.target.value;
    i18n.changeLanguage(newLang);
  };

  return (
    <select value={i18n.language} onChange={handleLanguageChange}>
      <option value="en">English</option>
      <option value="fr">Français</option>
      <option value="es">Español</option>
    </select>
  );
};

export default LanguageSwitcher;
```

This component uses the `useTranslation` hook to access the `i18n` object and the `changeLanguage` function. When the user selects a different language from the drop-down menu, the `handleLanguageChange` function is triggered, and the chosen language is applied by calling `i18n.changeLanguage(newLang)`. This function updates the language setting in the `i18n` object, causing the translation data to be reloaded for the chosen language.

## Update the `WeatherApp` component

We need to update the `WeatherApp` component to include the `LanguageSwitcher` component. Open the `src/WeatherApp.js` file and replace the existing `return` statement with the following code:

```jsx
...
return (
  <div>
    <LanguageSwitcher />
    <input type="text" value={city} onChange={handleCityChange} />
    <h2>
      {t("weather_forcast_for")}: {weatherData.name}
    </h2>
    <p>
      {t("current_temperature")}: {weatherData.main?.temp}
    </p>
    <p>
      {t("feels_like")}: {weatherData.main?.feels_like}
    </p>
    <p>
      {t("humidity")}: {weatherData.main?.humidity}
    </p>
  </div>
);

```

In this updated code, we import the `LanguageSwitcher` component and add it as the first child element inside the `div` container. This ensures that the language switcher is displayed at the top of the app. The rest of the code remains the same.

Finally, we can update the `src/App.js` file to run our application.

```jsx
import './App.css';
import WeatherApp from './WeatherApp';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <WeatherApp/>
      </header>
    </div>
  );
}

export default App;
```

## Run the weather app

To run the weather app, go to your terminal or command prompt and make sure you are in the root directory of your project (`weather-app`). Run the following command:

```bash
npm start
```

This command will start the development server, and the app will open automatically in your default browser. You should be able to enter a city name, view the weather information in the chosen language, and switch between different languages using the language switcher.

![app in English](https://www.honeybadger.io/images/blog/posts/creating-multi-language-user-interface-with-react/english.png)

![app in French](https://www.honeybadger.io/images/blog/posts/creating-multi-language-user-interface-with-react/french.png)

![app in Spanish](https://www.honeybadger.io/images/blog/posts/creating-multi-language-user-interface-with-react/spanish.png)

## Conclusion

Building a multi-language React application can seem daunting at first, but with the help of libraries, such as react-i18next, it becomes much simpler. By defining translation files and using the `useTranslation` hook, we can easily make our application translatable. Additionally, the `LanguageSwitcher` component provides an easy way for the user to switch between languages.

One way to optimize our multi-language React application is to implement lazy loading. Lazy loading is a technique where we only load the translation files for the user's selected language, rather than all the translation files at once. This can significantly reduce the initial load time of the application, especially if we have a large number of translation files.

Another way to improve our multi-language React application is to use a service like Google Translate to automatically translate the content. While automatic translations are not always perfect, they can be useful in providing a basic translation for users who don't speak the available languages.

To use Google Translate, we can make an API call to the Google Translate API with the content to be translated and the target language. We then replace the original content with the translated content. However, keep in mind that Google Translate is a paid service, so we need to ensure that we have the necessary budget to cover the costs.

In conclusion, building a multi-language React application is a necessary step for creating a global and accessible application. With the help of libraries like react-i18next and techniques like lazy loading and automatic translation, we can build an efficient and effective multi-language application that meets the needs of users around the world.