As web developers, we are constantly on a quest to create applications that are both functional and accessible to users worldwide. Internationalization, or i18n, has become a crucial aspect of achieving this goal. This technique allows us to tailor our applications to be usable in different languages and regions, significantly enhancing the user experience. In this tutorial, we will learn what internationalization is and how to implement it with . React What is Internationalization (i18n)? Internationalization, often abbreviated as i18n (where “i” stands for the first two letters of “internationalization,” and “18” represents the number of letters between “i” and “n”), refers to the process of adapting an application to be both localizable and usable in different languages and regions. It involves translating text, adapting date, time, and currency formats, and managing other cultural differences. Why Internationalization is Important Expanded Reach: By translating your application into multiple languages, you can reach a global audience, increasing its adoption and popularity. Enhanced User Experience: Users feel more comfortable and engaged when interacting with an application in their native language. Legal Compliance: In some regions, legislation requires that applications be available in local languages. Implementing Internationalization in React with react-i18next React itself does not provide internationalization features, but it integrates easily with libraries. Two of the most popular i18next libraries for React are and . i18next react-i18next react-intl To illustrate how we can implement internationalization in React using the react-i18next library, we’re going to build a simple application. This application will have two buttons that will switch the application’s language between English and Spanish. Setting Up We will create a new React project with Vite and follow the steps indicated. This time we will use , you can use the package manager of your choice. pnpm pnpm create vite We install the dependencies that we will need in the project: pnpm install react-i18next i18next a library that provides integration between React and i18next. react-i18next: library for internationalization (i18n) in web applications. i18next: a After that, we will create the following structure for the project: ...
├── src/
│   ├── components/
│   │   └── Header.jsx
│   ├── locales/
│   │   ├── en/
│   │   │   └── global.json
│   │   └── es/
│   │       └── global.json
│   │   ...
│   ├── App.jsx
│   ├── main.jsx
... Setting up i18next We’ll start by creating the files that will contain the translated texts for our application. : This folder contains subfolders representing the available languages for our application. In the example, two languages are included: English (en) and Spanish (es). You can add more folders for other languages as needed. src/locales/ : Each language subfolder contains a JSON file that stores the specific translations for that language. File names can vary based on project needs, such as header.json or landing-page.json. src/locales/{idioma}/ This allows for organizing translations consistently with the application’s structure. : en/globals.json {
 "header": {
  "chooseLanguage": "Choose Language:"
 },
 "mainSection": {
  "title": "Creating Multilingual React Apps with react-i18next: A Step-by-Step Guide"
 }
} : es/globals.json {
 "header": {
  "chooseLanguage": "Elige el idioma:"
 },
 "mainSection": {
  "title": "Creación de aplicaciones React multilingües con react-i18next: Guía paso a paso"
 }
} Now it is time to configure together with . i18next react-i18next : main.jsx import ReactDOM from 'react-dom/client'

import { I18nextProvider } from 'react-i18next'
import i18next from 'i18next'

import global_en from './locales/en/global.json'
import global_es from './locales/es/global.json'

import App from './App.jsx'

import './index.css'

i18next.init({
 interpolation: { escapeValue: false },
  lng: 'auto',
  fallbackLng: 'en',
 resources: {
  en: {
   global: global_en,
  },
  es: {
   global: global_es,
  },
 },
})

ReactDOM.createRoot(document.getElementById('root')).render(
 <I18nextProvider i18n={i18next}>
  <App />
 </I18nextProvider>
) We import the necessary dependencies and initialize using the function. i18next init The configuration options are as follows: : This configures the application’s language to be automatically detected based on the user’s browser language. lng: 'auto' : If an automatic language detection fails or if a translation for the detected language is not found, the application will default to English (en). fallbackLng: en : Translations for different languages are specified here. In this case, resources are provided for English (en) and Spanish (es) using the previously imported JSON files. resources : This configuration allows disabling automatic character escaping in translations. interpolation: { escapeValue: false } Finally, we wrap the component with , passing the instance as a prop. This ensures that all components within have access to the translations and can use internationalization in the application. App I18nextProvider i18next App Translating Components : App.jsx import { useTranslation } from 'react-i18next'

import Header from './components/Header'

import './App.css'

function App() {
  const { t } = useTranslation("global")

 return (
  <>
   <Header />
   <main>
        <h1>{t("mainSection.title")}</h1>
   </main>
  </>
 )
}

export default App Importamos desde 'react-i18next'. es hook proporcionado por 'react-i18next' que permite acceder a las funciones de traducción. { useTranslation } useTranslation We import from react-i18next. The is a hook provided by react-i18next that allows access to translation functions. useTranslation useTranslation Within the component, the hook is used. This initializes translation and provides a translation function that is configured to use translations from the JSON file corresponding to the translation group . App useTranslation("global") t() global This means that when is called, it will look for translations in the JSON file for the group. t() global For example, if the translation in the JSON file for is “Main Title” this header will display “Main Title” in the configured language. mainSection.title Switching Between Languages : Header.jsx import { useTranslation } from 'react-i18next'

export default function Header() {
  const { t, i18n } = useTranslation("global")

  return (
    <header>
      {t("header.chooseLanguage")}
      <button onClick={() => i18n.changeLanguage("en")}>EN</button>
      <button onClick={() => i18n.changeLanguage("es")}>ES</button>
    </header>
  )
} We use from to be able to switch between languages. We have two buttons that call the method in their event, which changes the language of the application to the language passed as a parameter. i18n useTranslation changeLanguage onClick() And there you have it, with this, we would have our fully multilingual application. As mentioned earlier, you can not only translate texts but also use many other functionalities for the internationalization of your application. I invite you to review the documentation. The app looks as follows: Demo here Repo here Conclusion Internationalization is essential to reach a global audience and provide an exceptional user experience. React, along with i18n libraries like react-i18next, simplifies the implementation of internationalization in your web applications. Make use of these tools to reach a diverse audience and enhance your users’ experience. Read more: Supercharge Your React Applications: 7 Best Practices and Techniques Enhance Your Photos with the CSS Contrast, Brightness, Saturation, and Sepia Functions Want to connect with the Author? Love connecting with friends all around the world on . Twitter Also published . here

Too Long; Didn't Read

Making security fun one episode at a time

How to Create Multilingual React Apps with react-i18next

Too Long; Didn't Read

L Javier Tovar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Create Multilingual React Apps with react-i18next

Too Long; Didn't Read

L Javier Tovar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES