# 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.
Last Updated: 5/8/2024, 7:58:27 AM