How to Localize Your React App with i18next

How to Localize Your React App with i18next

Learn to localize a React app using 18next set up language files, integrate translations, and create a multilingual user experience.

Posted by Joe Dodds on May 2, 2023

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.


  • 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:


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


{ "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.


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!

MultiLocale helps you manage translation files of native and web appsmultilocale

Sign up for our newsletter

Recent articles