i18n with react-i18next

Internationalization (i18n) with react-i18next is like having a translator standing next to your app, swapping out every label into the visitor's own language automatically.

In this page:

Why Use Translation Keys Instead of Hardcoded Text
Switching the Current Language
Handling Pluralization and Variables

Syntax

markup

const { t, i18n } = useTranslation();

<p>{t("key")}</p>
<p>{t("keyWithVariable", { name: value })}</p>

i18n.changeLanguage("languageCode");

Why Use Translation Keys Instead of Hardcoded Text

Writing English text directly in JSX ties your component permanently to one language. Using a translation key instead (like t('welcome.title')) looks up the actual displayed text from a language file, so adding a new supported language means adding a new translation file, not touching component code at all.

Note: Organize keys hierarchically, like 'header.nav.home', to keep large translation files organized by section.

Warning: It's an npm package requiring setup (translation files, provider initialization) — it can't run in this CDN-only sandbox.

Example: Why Use Translation Keys Instead of Hardcoded Text

markup

// Run in your local React project (npm install required)
import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome.title')}</h1>;
}
// en.json: { "welcome": { "title": "Welcome!" } }
// fr.json: { "welcome": { "title": "Bienvenue!" } }

⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.

Switching the Current Language

The useTranslation hook also returns an i18n instance with a changeLanguage function. Calling it updates the active language app-wide, and every component using the t function automatically re-renders with the newly translated text.

Note: Persist the chosen language (e.g. to localStorage) so it's remembered across page reloads, similar to theme persistence.

Warning: Forgetting to actually configure the target language's translation file means changeLanguage succeeds, but t() calls fall back to missing-key placeholders or the default language.

Example: Switching the Current Language

markup

// Run in your local React project (npm install required)
import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <div>
      <button onClick={() => i18n.changeLanguage('en')}>English</button>
      <button onClick={() => i18n.changeLanguage('fr')}>Français</button>
    </div>
  );
}

⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.

Handling Pluralization and Variables

i18next supports interpolating variables into translated strings (like a username) and choosing between singular/plural translation forms automatically based on a count value, both handled through the same t() function with extra options.

Note: Pass a count option to t() for pluralization — i18next automatically picks the singular or plural translation key based on its value.

Warning: Manually concatenating strings for pluralization (like count + ' item' + (count !== 1 ? s : '')) breaks for languages with more complex plural rules than English's simple singular/plural — let i18next handle it.

Example: Handling Pluralization and Variables

markup

// Run in your local React project (npm install required)
import { useTranslation } from 'react-i18next';

function Cart({ itemCount }) {
  const { t } = useTranslation();
  return <p>{t('cart.items', { count: itemCount })}</p>;
}
// en.json: { "cart": { "items_one": "{{count}} item", "items_other": "{{count}} items" } }

⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Accessibility (a11y) in React Next Lesson → React Security Best Practices

i18n with react-i18next

Why Use Translation Keys Instead of Hardcoded Text

Switching the Current Language

Handling Pluralization and Variables

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code