react_i18next_typescript_setup_with_useTranslation_hook.ts

1import React from 'react';
2import { createRoot } from 'react-dom/client';
3import i18n from 'i18next';
4import { useTranslation, initReactI18next, Trans } from 'react-i18next';
5
6// 1. Initialize i18next
7i18n
8  .use(initReactI18next) // passes i18n down to react-i18next
9  .init({
10    resources: {
11      en: {
12        translation: {
13          "Welcome to React": "Welcome to React and react-i18next"
14        }
15      },
16      fr: {
17        translation: {
18          "Welcome to React": "Bienvenue à React et react-i18next"
19        }
20      }
21    },
22    lng: "en", // if you're using a language detector, do not define the lng option
23    fallbackLng: "en",
24
25    interpolation: {
26      escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
27    }
28  });
29
30// 2. Component using the useTranslation hook
31function MyComponent() {
32  const { t, i18n } = useTranslation();
33
34  return (
35    <div>
36      <h1>{t('Welcome to React')}</h1>
37      <button onClick={() => i18n.changeLanguage('fr')}>fr</button>
38      <button onClick={() => i18n.changeLanguage('en')}>en</button>
39    </div>
40  );
41}
42
43// 3. Append to DOM
44const root = createRoot(document.getElementById('root')!);
45root.render(
46  <React.StrictMode>
47    <MyComponent />
48  </React.StrictMode>
49);
50
51/**
52 * Note: To get full TypeScript autocompletion for keys, 
53 * you should create a declaration file (e.g., i18next.d.ts):
54 * 
55 * import 'i18next';
56 * declare module 'i18next' {
57 *   interface CustomTypeOptions {
58 *     resources: {
59 *       translation: typeof import('./locales/en/translation.json');
60 *     };
61 *   }
62 * }
63 */