Internationalization (i18n)

Overview

We're using react-i18next (opens new window) for Internationalization. You can find its configurations in src/configs/i18n.ts file and the locales in public/locales folder in the full version.

Usage

Refer to this article to implement the internationalization.

Add i18n

WARNING

Only for those who are using the starter-kit

If you are using the full version, then you don't need to add i18n as it is already available in that version. But if you are using the starter-kit (which is recommended) and want to add i18n, then follow these steps:

• You need to add these npm packages:
  • i18next
  • react-i18next
  • i18next-http-backend
  • i18next-browser-languagedetector

• Copy src/configs/i18n.ts file from the full version and paste it under the same directory in your project
• Add import 'src/configs/i18n' import statement in src/pages/_app.tsx file
• Add your locale files in public/locales folder
• If you want to translate the navigation menu, then copy the whole code from src/layouts/components/Translations.tsx file from the full version and paste it under the same directory in your project
• If you want a language dropdown in the appBar to change the current language in the app, then import src/@core/layouts/components/shared-components/LanguageDropdown.tsx file and render LanguageDropdown component in src/layouts/components/vertical/AppBarContent.tsx or src/layouts/components/horizontal/AppBarContent.tsx file

<LanguageDropdown settings={settings} saveSettings={saveSettings} />

Remove i18n

WARNING

Only for those who are using the full version

If you do not want to use i18n, we recommend you start your project with the starter-kit. But if you are using the full version and does not want to use i18n, then follow these steps:

• You may remove all the packages related to i18n from package.json file if you want to
  • i18next
  • react-i18next
  • i18next-http-backend
  • i18next-browser-languagedetector
• Remove src/configs/i18n.ts file
• Remove import 'src/configs/i18n' import statement from src/pages/_app.tsx file
• Replace the following code in src/layouts/components/Translations.tsx file

• Remove LanguageDropdown file import statement and rendered component from src/layouts/components/vertical/AppBarContent.tsx and/or src/layouts/components/horizontal/AppBarContent.tsx file

<LanguageDropdown settings={settings} saveSettings={saveSettings} />

• Remove your locale files from public/locales folder

Add / Remove a language

Suppose you want to add de (German) language and remove ar (Arabic) language. For this, you need to follow these steps:

• Remove public/locales/ar.json file and add public/locales/de.json file. You need to keep the format of the file as it is in other locale files
• Make a new file in src/layouts/components folder and place the following code in this file

• Import the src/layouts/components/UserLanguageDropdown.tsx file and render it in the src/layouts/components/vertical/AppBarContent.tsx and/or src/layouts/components/horizontal/AppBarContent.tsx file.