i18n internationalization

The boiler plate provides a pre-configured translations under src/locales.

The alias path for this is @locales

Translating

To translate the welcome label, you declare it's key to in the default language

/*src/locales/en/translations.ts*/
   export const TRANSLATIONS_EN = {
    welcome:" Welcome to Super Vite ⚡",
    };

Write it's FR version in src/locales/fr/translations.ts

Using key welcome to refer to specific label

/*src/locales/en/translations.ts*/
   export const TRANSLATIONS_EN = {
    welcome:"Bienvenue à Super Vite ⚡",
    };

Rendering the label

/*src/views/counter.tsx*/
import React, { FC } from 'react'
import { useTranslation } from 'react-i18next'; // import the translation hook
import "@locales/i18n"; // import translation configurations from '@locales/i18n'

const Counter = () => {
    const {t} = useTranslation(); //define t -> translation state
    return (
           //render the translated label
            <h1>
               {t('welcome')} 
            </h1>
    )
}
export default Counter

Adding a language

Create the language's translation directory. Let the directory name be the language code e.g: en, fr.

Inside the translation directory add a file translations.ts with translations objects

/*src/locales/en/translations.ts*/
   export const TRANSLATIONS_EN = {
    welcome:" Welcome to Super Vite ⚡",
    };

Import the translation object TRANSLATIONS_EN in src/locales/i18n.ts and assign it to a language international code

/*src/locales/i18n.ts*/
...
   .init({
   resources: {
     en: {
       translation: TRANSLATIONS_EN
     }
   }
 });
...

Finally define your language with code in src/translations/langs.ts in the list of languages

/*src/locales/langs.ts*/
...
export const langs: Array<ILang>= [
  {
      abbr: 'en',
      nativeName: 'English',
      displayedAbbr: 'Eng'
  }
]
...