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

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.

Common Mistakes

Hardcoding English text directly in JSX instead of using translation keys, making later translation painful.
Forgetting to wrap the app in the i18next provider/initialization, so the t() function has nothing to translate from.
Not handling pluralization correctly — '1 item' vs '2 items' needs specific i18next plural key handling, not simple string concatenation.

Chapter Summary

react-i18next is a popular library for translating React apps into multiple languages.
Text is referenced via translation KEYS (like 'welcome.title'), resolved to the current language's actual string.
The useTranslation hook provides a t function used throughout components to look up translated text.
Switching languages is handled by i18next's language-changing API, re-rendering translated text automatically.

Browser Support

Requires npm install react-i18next i18next — not available via CDN in this sandbox; works with React 16.8+.

🔒

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