Internationalization with react-i18next

A100_Internationalization.md

Internationalization

This app aims to support internationalization, thanks to i18next. A crash course is available on YouTube.

B100_Changement.md

how to change the content of the translation ?

The following folder : public\locales contains the translation for each language you plan to support. If you add a new language, please update the following enumeration : src\utils\enums\languages.ts and add the associated translations.

public
└───locales
    └───en
    │       app.json
    │       auth.json
    │       common.json
    │       error.json
    │       home.json
    │       notFound.json

B111_common.json

{
    "validation": "OK",
    "cancel": "Cancel",
    "loading": "Loading",
    "redirecting": "Redirecting {{preposition}} {{somewhere}}",
    "to": "to",
    "back": "back",
    "goTo": "Going back to",
    "previousPage": "previous page",
    "tryAgain": "Please try again.",
    "languageModify": "Language modification.",
    "create": "Create",
    "loginPageTitle": "Login",
    "registerPageTitle": "Register",
    "homePageTitle": "Home",
    "notFoundPageTitle": "Page not found",
    "menu": "menu",
    "link": "link",
    "connectYou": "Connect you.",
    "noContent": "There is no content.",
    "reloadApp": "Restart the app.",
    "contact": "contact",
    "openInNewTab": "Open in a new tab."
}

B112_error.json

{
    "unknown": "Some strange thing happened.",
    "400": "Bad Request",
    "401": "Unauthorized",
    "402": "Payment Required",
    "403": "Forbidden",
    "404": "Not Found",
    "405": "Method Not Allowed",
    "406": "Not Acceptable",
    "407": "Proxy Authentication Required",
    "408": "Request Timeout",
}

B113_other.json

{
    "app_one": "an app",
    "app_other": "{{count}} apps",
    "app_zero": "no app",
    "cake_other": "{{count, number}} cakes",
    "proposition": "{{subject}} is {{predicate}}."
}

C100_Config.md

How to configure it in a React app ?

C121_Languages.ts

// The value of the language should be the same than the folder name of the translations in the public folder

export enum Language {
  en = 'en',
}

C131_i18.ts

import type { InitOptions } from 'i18next';
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';

import { Language } from '../../types/enums/languages';

const i18nextOptions: InitOptions = {
  //debug: true,
  fallbackLng: Language.en,
  preload: [Language.en],
  ns: ['common', 'error'],
  defaultNS: 'common',
  fallbackNS: ['common', 'error'],
  interpolation: {
    escapeValue: false, // not needed for react as it escapes by default
  },
};

i18n
  // i18next-http-backend
  // loads translations from your server
  // https://github.com/i18next/i18next-http-backend
  .use(Backend)
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init(i18nextOptions);

export default i18n;

C141_LanguageSwitch.tsx

import type { i18n } from 'i18next';

import { Language } from '../../types/enums/languages';

const langs = Object.values(Language);

const getLanguageButtons = (i18n: i18n): ActionSheetButton[] => {
  const res: ActionSheetButton[] = [];
  langs.forEach((lang) =>
    res.push({
      text: lang.toUpperCase(),
      handler: () => Promise.resolve(i18n.changeLanguage(lang as Language) as unknown as Promise<void>),
    })
  );
  return res;
};

D100_Use.md

How to use it ?

D110_example.ts

import { useTranslation } from 'react-i18next';

// Pattern
let sentence = i18n.t('key');

// Examples

// 1
sentence = i18n.t('validation'); // => 'OK' from 'common' namespace as it is the fallbackNS
sentence = i18n.t('validation', { ns: 'friendly' }); // => 'Let's go' from 'friendly' namespace

sentence = i18n.t(`error.${code}`, 'error.unknown');

sentence = i18n.t('proposition', { what: 'David', predicate: 'awesome' });
sentence = i18n.t('proposition', { what: 'David', predicate: 'awesome' });

sentence = i18n.t('app', { count: 4 });
sentence = i18n.t('cake', { count: 10000 }); // => 10,000

// 2
const { t, i18n } = useTranslation('auth');
const label = t('redirecting', { preposition: t('to'), somewhere: t('homePageTitle') });