Adding Multi-Lingual Support in React

shubham gupta — Sun, 18 Jan 2026 07:14:10 +0000

To add multi-language support to your project, you need to implement internationalization in React. We use react-i18next, which is based on i18next.
This module provides components to render translated content when the language changes. It can be used with any UI framework (Angular, React, Vue, etc.).

https://www.i18next.com/ We will be using i18next in our React project. Localization and translation will be stored on the React side.

To begin, install this package in your React project.Create a file named i18n.js that contains the following code.

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-xhr-backend";
import { initReactI18next } from "react-i18next";

const fallbackLng = ["en"];

i18n
  .use(Backend) // used to load data from othe directory
  .use(LanguageDetector) // detects the current language
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    fallbackLng, // default language
    detection: {
      checkWhitelist: true,
    },
    debug: false,
    interpolation: {
      escapeValue: false, // no need for react. it escapes by default
    },
  });

export default i18n;

In your App.js import i18n.js file

import "./i18n";

In above code we have used LanguageDetector from react-i18next-browser-languagedetector which automatically detects the selected language, similarly we have used Backend from react-i18next-xhr-backend , to load our data .

Here, we will be adding support for two languages English and French.

Create a folder in your Public folder named locale , add another folder inside it named language code i.e "en" and"fr" each containing a file named translation.json

Inside translation.json, the file contains key value pair, a unique key for that word, and its respective translation as its value. Here are some samples

If you need to store your files in any other path than the default path u can specify the path while Initialization

Example, here I have stored my files inside the assets folder

backend: {
      loadPath: "/assets/locale/{{lng}}/translate.json",
    },

Inside en/translation.json

{
  "hello": "Hello",
  "cancel": "Cancel",
  "continue": "Comtinue"
}

fr/translation.json

{
  "hello": "Salut",
  "cancel": "Annuler",
  "continue": "Continuez"
}

Now, to use these translations in your application, we use the useTranslation hook from react-i18next.

Mostly we will be using t function and i18n instance provided by the useTranslation hook.

i18n instance provides a function changeLanguage() which accepts language code as to which language need to be rendered in our react application.

import { Menu, Transition } from "@headlessui/react";
import { GlobeAltIcon } from "@heroicons/react/24/outline";
import { Fragment } from "react";
import { useTranslation } from "react-i18next";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

let countries = [
  {
    code: "fr",
    name: "Français",
    country_code: "fr",
  },
  {
    code: "en",
    name: "English",
    country_code: "gb",
  },
];

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

  return (
    <>
      <div>
        <Menu
          as="div"
          className="px-3 pl-0 relative flex"
          aria-label="usermenu"
        >
          <Menu.Button
            className="group w-full  text-sm text-left font-medium text-gray-700 focus:outline-none"
            aria-label="usermenu-button"
          >
            <span className="flex w-full justify-between items-center">
              <GlobeAltIcon className="h-7 w-7 cursor-pointer  text-blue-600" />
            </span>
          </Menu.Button>
          <Transition
            as={Fragment}
            enter="transition ease-out duration-100"
            enterFrom="transform opacity-0 scale-95"
            enterTo="transform opacity-100 scale-100"
            leave="transition ease-in duration-75"
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
            <Menu.Items
              aria-label="menu-item-container"
              className="z-10 mx-3 origin-top absolute left-[-36px] sm:left-[-25px] md:left-[-25px] top-[42px] xl:left-[-80px] right-0 min-w-max mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-200 focus:outline-none"
            >
              <div className="px-1 py-1 " aria-label="menu-items">
                {countries.map((lng) => {
                  return (
                    <Menu.Item key={lng.code}>
                      <button
                        className={classNames(
                          "flex items-center space-x-2 px-4 py-2 text-sm cursor-pointer"
                        )}
                        onClick={() => i18n.changeLanguage(lng.code)} // used to change language that needs to be rendered
                        disabled={i18n.language === lng.code}
                      >
                        <span class={`fi fi-${lng.country_code}`}></span>
                        <span>{lng.name}</span>
                      </button>
                    </Menu.Item>
                  );
                })}
              </div>
            </Menu.Items>
          </Transition>
        </Menu>
      </div>
    </>
  );
};

export default LanguageSelector;

In the component above, a dropdown shows language and country flag options. When selected, the language is applied across the application. We use the function i18n.changeLanguage(languageCode) to change the application language.

Here in our SampleForm Component , we are rendering our localization based labels,t function is used and the key of the word or the statement u need is provided ad the parameter to render that label in the current language selected

import ModuleContainer from "components/shared/moduleContainer/ModuleContainer";
import { useTranslation } from "react-i18next";

function SampleForm() {
  const { t } = useTranslation();
  return (
    <>
      <ModuleContainer title={"Sample Form"} hideBackButton={true}>
        <p>{t("hello")}</p>
        <p>{t("cancel")}</p>
      </ModuleContainer>
    </>
  );
}

export default SampleForm;

Here , based on language selected the translation is rendered , in this way across the application labels and messages can be transformed to be rendered in any desired language across your react application .

If you'd like to be in the know, subscribe, clap, like and share. Cheers!

DEV Community: shubham gupta

Adding Multi-Lingual Support in React