Skip to main content

Basic Setup for React i18n

In this tutorial, we will go through the basic setup for internationalization (i18n) in a React application using the react-i18next library.

1. Install dependencies​

Install the react-i18next and i18next packages using your preferred package manager.

npm install react-i18next i18next

2. Create i18n configuration​

Create a file named i18n.js, i18n.ts, i18n/index.js or i18n/index.tsin your project's src directory and add the following code:

src/i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        welcome: 'Welcome to React and react-i18next',
      },
    },
    fr: {
      translation: {
        welcome: 'Bienvenue à React et react-i18next',
      },
    },
    es: {
      translation: {
        welcome: 'Bienvenido a React y react-i18next',
      },
    },
  },
  lng: 'en', // default language
  fallbackLng: 'en', // fallback language

  interpolation: {
    escapeValue: false,
  },
});

You can set a default language in an option lng and a fallback language in an option fallbackLng.

3. Use the i18n configuration in your app​

Import the i18n configuration in your main application file (e.g., index.tsx or App.tsx):

src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './i18n'; // Import the i18n configuration

ReactDOM.render(<App />, document.getElementById('root'));

4. Use the useTranslation hook​

Now you can use the useTranslation hook in your components to access the translation function t:

src/component/Hero.tsx
import React from 'react';
import { useTranslation } from 'react-i18next';

export default function Hero() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
    </div>
  );
}
<!-- rendered output -->
<div>
  <h1>Welcome to React and react-i18next</h1>
</div>

5. Change language​

You can change the language by calling the changeLanguage method from the i18n instance:

src/component/LanguageSwitcher.tsx
import { useTranslation } from 'react-i18next';

export default function LanguageSwitcher() {
  const { i18n } = useTranslation();

  return (
    <>
      <button onClick={() => i18n.changeLanguage('en')}>English</button>
      <button onClick={() => i18n.changeLanguage('fr')}>Français</button>
      <button onClick={() => i18n.changeLanguage('es')}>Español</button>
    </>
  );
}

(Optional) Get a current language​

You can get the current language by accessing the language property from the i18n instance:

src/component/Seo.tsx
import { useTranslation } from 'react-i18next';
import { Helmet } from 'react-helmet';

function Seo() {
  const { i18n } = useTranslation();

  return (
    <Helmet>
      <html lang={i18n.language} />
    </Helmet>
  );
}

(Optional) Extracting translations​

You can also extract translations to external namespaces and load them asynchronously. This is useful for larger applications where you want to split translations into separate files.

Create a new JSON file and import it in your i18n configuration:

src/i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enLang from '@/i18n/locales/en/translation.json';
import frLang from '@/i18n/locales/fr/translation.json';
import esLang from '@/i18n/locales/es/translation.json';

const resources = {
  en: { translation: enLang },
  fr: { translation: frLang },
  es: { translation: esLang },
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'en', // default language
  fallbackLng: 'en', // fallback language

  interpolation: {
    escapeValue: false, // React already escapes values, so this prevents double-escaping
  },
});

and here is an example of the translation.json file:

src/i18n/locales/en/translation.json
{
  "welcome": "Welcome to React and react-i18next"
}

Conclusion​

In this tutorial, we have covered the basic setup for internationalization in a React application using the react-i18next library. We have seen how to install the necessary dependencies, create an i18n configuration, use the useTranslation hook to access translations, and change the language dynamically.