0PricingLogin▼
React Academy · Lesson

Using the useTranslation Hook

Replace hardcoded strings with t() calls and organise translation JSON files.

Welcome

In this lesson you will use the useTranslation hook to access the t() function, translate strings in components, and organise translation JSON files by namespace.

The useTranslation Hook

Call useTranslation() inside a component to get the `t` translation function and the `i18n` instance. Pass the namespace name if using namespaced translations.
import { useTranslation } from 'react-i18next';

function Header() {
  const { t } = useTranslation('common');
  return <h1>{t('app_title')}</h1>;
}

All lessons in this course

  1. Setting Up react-i18next
  2. Using the useTranslation Hook
  3. Pluralisation & Interpolation
  4. Language Switcher & Lazy-Loading Translations
← Back to React Academy