React Internationalization (i18n) Guide

1// Setting up react-i18next
2// 1. Install dependencies: npm install react-i18next i18next i18next-browser-languagedetector
3
4// i18n.ts - Configuration file
5import i18n from 'i18next';
6import { initReactI18next } from 'react-i18next';
7import LanguageDetector from 'i18next-browser-languagedetector';
8
9// Translation resources
10const resources = {
11  en: {
12    translation: {
13      welcome: {
14        title: 'Welcome to {{appName}}',
15        subtitle: 'Build amazing React applications',
16        description: 'Start your journey with React today'
17      },
18      navigation: {
19        home: 'Home',
20        about: 'About',
21        products: 'Products',
22        contact: 'Contact',
23        language: 'Language'
24      },
25      common: {
26        loading: 'Loading...',
27        error: 'Something went wrong',
28        retry: 'Try again',
29        save: 'Save',
30        cancel: 'Cancel',
31        delete: 'Delete',
32        edit: 'Edit',
33        search: 'Search',
34        noResults: 'No results found'
35      },
36      forms: {
37        email: 'Email',
38        password: 'Password',
39        confirmPassword: 'Confirm Password',
40        required: 'This field is required',
41        invalidEmail: 'Please enter a valid email',
42        passwordMismatch: 'Passwords do not match',
43        minLength: 'Must be at least {{count}} characters',
44        maxLength: 'Must be no more than {{count}} characters'
45      },
46      messages: {
47        success: 'Operation completed successfully',
48        error: 'An error occurred: {{error}}',
49        saved: 'Your changes have been saved',
50        deleted: 'Item deleted successfully',
51        confirmDelete: 'Are you sure you want to delete this item?'
52      }
53    }
54  },
55  ja: {
56    translation: {
57      welcome: {
58        title: '{{appName}}へようこそ',
59        subtitle: '素晴らしいReactアプリケーションを構築',
60        description: '今日からReactの旅を始めましょう'
61      },
62      navigation: {
63        home: 'ホーム',
64        about: '概要',
65        products: '製品',
66        contact: 'お問い合わせ',
67        language: '言語'
68      },
69      common: {
70        loading: '読み込み中...',
71        error: 'エラーが発生しました',
72        retry: '再試行',
73        save: '保存',
74        cancel: 'キャンセル',
75        delete: '削除',
76        edit: '編集',
77        search: '検索',
78        noResults: '結果が見つかりません'
79      },
80      forms: {
81        email: 'メールアドレス',
82        password: 'パスワード',
83        confirmPassword: 'パスワード確認',
84        required: 'この項目は必須です',
85        invalidEmail: '有効なメールアドレスを入力してください',
86        passwordMismatch: 'パスワードが一致しません',
87        minLength: '{{count}}文字以上で入力してください',
88        maxLength: '{{count}}文字以下で入力してください'
89      },
90      messages: {
91        success: '操作が正常に完了しました',
92        error: 'エラーが発生しました: {{error}}',
93        saved: '変更が保存されました',
94        deleted: 'アイテムが削除されました',
95        confirmDelete: 'このアイテムを削除してもよろしいですか？'
96      }
97    }
98  },
99  es: {
100    translation: {
101      welcome: {
102        title: 'Bienvenido a {{appName}}',
103        subtitle: 'Construye aplicaciones React increíbles',
104        description: 'Comienza tu viaje con React hoy'
105      },
106      navigation: {
107        home: 'Inicio',
108        about: 'Acerca de',
109        products: 'Productos',
110        contact: 'Contacto',
111        language: 'Idioma'
112      },
113      common: {
114        loading: 'Cargando...',
115        error: 'Algo salió mal',
116        retry: 'Intentar de nuevo',
117        save: 'Guardar',
118        cancel: 'Cancelar',
119        delete: 'Eliminar',
120        edit: 'Editar',
121        search: 'Buscar',
122        noResults: 'No se encontraron resultados'
123      }
124      // ... more translations
125    }
126  }
127};
128
129// Initialize i18next
130i18n
131  .use(LanguageDetector) // Detects user language
132  .use(initReactI18next) // Passes i18n instance to react-i18next
133  .init({
134    resources,
135    fallbackLng: 'en',
136    debug: process.env.NODE_ENV === 'development',
137    
138    interpolation: {
139      escapeValue: false // React already escapes values
140    },
141    
142    detection: {
143      order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
144      caches: ['localStorage', 'cookie']
145    }
146  });
147
148export default i18n;
149
150// App.tsx - Wrap your app with I18nextProvider
151import React from 'react';
152import { I18nextProvider } from 'react-i18next';
153import i18n from './i18n';
154
155function App() {
156  return (
157    <I18nextProvider i18n={i18n}>
158      <YourApp />
159    </I18nextProvider>
160  );
161}
162
163// Using translations in components
164import { useTranslation } from 'react-i18next';
165
166function WelcomeComponent() {
167  const { t } = useTranslation();
168  
169  return (
170    <div>
171      <h1>{t('welcome.title', { appName: 'React Learning' })}</h1>
172      <p>{t('welcome.subtitle')}</p>
173      <p>{t('welcome.description')}</p>
174    </div>
175  );
176}

1// Translation organization and management
2// locales/en/common.json
3{
4  "brand": {
5    "name": "React Learning Hub",
6    "tagline": "Master React Development"
7  },
8  "actions": {
9    "save": "Save",
10    "save_and_continue": "Save and Continue",
11    "save_as_draft": "Save as Draft",
12    "cancel": "Cancel",
13    "delete": "Delete",
14    "delete_confirm": "Are you sure you want to delete {{item}}?"
15  },
16  "status": {
17    "loading": "Loading...",
18    "saving": "Saving...",
19    "saved": "Saved",
20    "error": "Error",
21    "success": "Success"
22  },
23  "validation": {
24    "required": "{{field}} is required",
25    "email": "Please enter a valid email address",
26    "min": "{{field}} must be at least {{min}} characters",
27    "max": "{{field}} must be no more than {{max}} characters",
28    "pattern": "{{field}} format is invalid",
29    "unique": "{{field}} must be unique"
30  },
31  "time": {
32    "just_now": "Just now",
33    "minutes_ago": "{{count}} minute ago",
34    "minutes_ago_plural": "{{count}} minutes ago",
35    "hours_ago": "{{count}} hour ago",
36    "hours_ago_plural": "{{count}} hours ago",
37    "days_ago": "{{count}} day ago",
38    "days_ago_plural": "{{count}} days ago"
39  }
40}
41
42// Using pluralization
43import { useTranslation } from 'react-i18next';
44
45function NotificationBadge({ count }: { count: number }) {
46  const { t } = useTranslation();
47  
48  return (
49    <div className="notification-badge">
50      <span className="count">{count}</span>
51      <span className="label">
52        {t('notifications.count', { count })}
53        {/* Will use:
54          - "You have 0 notifications" 
55          - "You have 1 notification"
56          - "You have 5 notifications"
57        */}
58      </span>
59    </div>
60  );
61}
62
63// Context-based translations
64function UserGreeting({ user, timeOfDay }: { user: User; timeOfDay: string }) {
65  const { t } = useTranslation();
66  
67  // Context separator is '_' by default
68  return (
69    <h1>
70      {t(`greeting_${timeOfDay}`, { 
71        name: user.name,
72        defaultValue: t('greeting', { name: user.name })
73      })}
74    </h1>
75  );
76}
77
78// Translation with rich content
79function TermsAndConditions() {
80  const { t } = useTranslation();
81  
82  return (
83    <p>
84      {t('terms.agreement', {
85        interpolation: { escapeValue: false },
86        components: {
87          link1: <a href="/terms" />,
88          link2: <a href="/privacy" />,
89          bold: <strong />
90        },
91        defaultValue: 
92          'By clicking continue, you agree to our <link1>Terms of Service</link1> and <link2>Privacy Policy</link2>.'
93      })}
94    </p>
95  );
96}
97
98// Trans component for complex translations
99import { Trans } from 'react-i18next';
100
101function ComplexMessage({ user, count }: { user: User; count: number }) {
102  return (
103    <Trans 
104      i18nKey="user.message" 
105      values={{ name: user.name, count }}
106      components={{
107        bold: <strong />,
108        italic: <em />,
109        link: <a href="/profile" />
110      }}
111    >
112      Hello <bold>{{name}}</bold>, you have <italic>{{count}}</italic> new <link>messages</link>.
113    </Trans>
114  );
115}
116
117// Translation hooks with TypeScript
118import { useTranslation } from 'react-i18next';
119
120// Define translation keys type
121type TranslationKeys = {
122  'welcome.title': { appName: string };
123  'welcome.subtitle': never;
124  'user.greeting': { name: string; role: string };
125  'items.count': { count: number };
126  'error.message': { error: string };
127};
128
129// Typed translation hook
130function useTypedTranslation() {
131  const { t: originalT, ...rest } = useTranslation();
132  
133  const t = <K extends keyof TranslationKeys>(
134    key: K,
135    ...args: TranslationKeys[K] extends never 
136      ? [] 
137      : [options: TranslationKeys[K]]
138  ): string => {
139    return originalT(key, ...(args as any));
140  };
141  
142  return { t, ...rest };
143}
144
145// Usage with type safety
146function TypedComponent() {
147  const { t } = useTypedTranslation();
148  
149  return (
150    <div>
151      {t('welcome.title', { appName: 'React App' })} {/* ✓ Type safe */}
152      {t('welcome.subtitle')} {/* ✓ No params needed */}
153      {/* {t('welcome.title')} */} {/* ✗ TS Error: Missing params */}
154    </div>
155  );
156}

1// Date and time formatting with i18n
2import { useTranslation } from 'react-i18next';
3import { format, formatDistance, formatRelative } from 'date-fns';
4import { enUS, ja, es, de, fr } from 'date-fns/locale';
5
6// Locale mapping for date-fns
7const locales = {
8  en: enUS,
9  ja: ja,
10  es: es,
11  de: de,
12  fr: fr
13};
14
15// Custom hook for formatted dates
16function useFormattedDate() {
17  const { i18n } = useTranslation();
18  const locale = locales[i18n.language] || enUS;
19  
20  const formatDate = (date: Date, formatStr: string = 'PPP') => {
21    return format(date, formatStr, { locale });
22  };
23  
24  const formatRelativeTime = (date: Date) => {
25    return formatDistance(date, new Date(), { 
26      addSuffix: true, 
27      locale 
28    });
29  };
30  
31  const formatRelativeDate = (date: Date) => {
32    return formatRelative(date, new Date(), { locale });
33  };
34  
35  return {
36    formatDate,
37    formatRelativeTime,
38    formatRelativeDate
39  };
40}
41
42// Component using formatted dates
43function EventCard({ event }: { event: Event }) {
44  const { formatDate, formatRelativeTime } = useFormattedDate();
45  const { t } = useTranslation();
46  
47  return (
48    <div className="event-card">
49      <h3>{event.title}</h3>
50      <p>
51        {t('event.date')}: {formatDate(event.date, 'PPP')}
52      </p>
53      <p>
54        {t('event.time')}: {formatDate(event.date, 'p')}
55      </p>
56      <p className="relative-time">
57        {formatRelativeTime(event.date)}
58      </p>
59    </div>
60  );
61}
62
63// Number and currency formatting
64function useNumberFormat() {
65  const { i18n } = useTranslation();
66  
67  const formatNumber = (
68    value: number, 
69    options?: Intl.NumberFormatOptions
70  ) => {
71    return new Intl.NumberFormat(i18n.language, options).format(value);
72  };
73  
74  const formatCurrency = (
75    value: number, 
76    currency: string = 'USD'
77  ) => {
78    return new Intl.NumberFormat(i18n.language, {
79      style: 'currency',
80      currency,
81      minimumFractionDigits: 0,
82      maximumFractionDigits: 2
83    }).format(value);
84  };
85  
86  const formatPercent = (value: number) => {
87    return new Intl.NumberFormat(i18n.language, {
88      style: 'percent',
89      minimumFractionDigits: 0,
90      maximumFractionDigits: 2
91    }).format(value);
92  };
93  
94  const formatCompact = (value: number) => {
95    return new Intl.NumberFormat(i18n.language, {
96      notation: 'compact',
97      compactDisplay: 'short'
98    }).format(value);
99  };
100  
101  return {
102    formatNumber,
103    formatCurrency,
104    formatPercent,
105    formatCompact
106  };
107}
108
109// Pricing component with currency
110function PricingCard({ price, currency, discount }: PricingProps) {
111  const { formatCurrency, formatPercent } = useNumberFormat();
112  const { t } = useTranslation();
113  
114  const finalPrice = price * (1 - discount);
115  
116  return (
117    <div className="pricing-card">
118      <div className="original-price">
119        {discount > 0 && (
120          <span className="strikethrough">
121            {formatCurrency(price, currency)}
122          </span>
123        )}
124      </div>
125      
126      <div className="current-price">
127        {formatCurrency(finalPrice, currency)}
128      </div>
129      
130      {discount > 0 && (
131        <div className="discount">
132          {t('pricing.save')} {formatPercent(discount)}
133        </div>
134      )}
135    </div>
136  );
137}
138
139// Statistics with number formatting
140function Statistics({ data }: { data: StatsData }) {
141  const { formatNumber, formatCompact } = useNumberFormat();
142  const { t } = useTranslation();
143  
144  return (
145    <div className="statistics">
146      <div className="stat-card">
147        <h3>{t('stats.totalUsers')}</h3>
148        <p className="stat-value">
149          {formatCompact(data.totalUsers)}
150        </p>
151        <p className="stat-detail">
152          {formatNumber(data.totalUsers)}
153        </p>
154      </div>
155      
156      <div className="stat-card">
157        <h3>{t('stats.revenue')}</h3>
158        <p className="stat-value">
159          {formatCurrency(data.revenue, data.currency)}
160        </p>
161      </div>
162      
163      <div className="stat-card">
164        <h3>{t('stats.growthRate')}</h3>
165        <p className="stat-value">
166          {formatPercent(data.growthRate)}
167        </p>
168      </div>
169    </div>
170  );
171}
172
173// Custom date picker with localization
174import DatePicker from 'react-datepicker';
175import 'react-datepicker/dist/react-datepicker.css';
176
177function LocalizedDatePicker({ value, onChange }: DatePickerProps) {
178  const { i18n } = useTranslation();
179  const locale = locales[i18n.language] || enUS;
180  
181  // Register locale with date picker
182  useEffect(() => {
183    import(`date-fns/locale/${i18n.language}/index.js`)
184      .then(module => {
185        // Locale loaded
186      })
187      .catch(() => {
188        console.warn(`Locale ${i18n.language} not found`);
189      });
190  }, [i18n.language]);
191  
192  return (
193    <DatePicker
194      selected={value}
195      onChange={onChange}
196      locale={locale}
197      dateFormat="P"
198      showMonthDropdown
199      showYearDropdown
200      dropdownMode="select"
201      placeholderText={t('forms.selectDate')}
202    />
203  );
204}