# 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

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

// Make sure to add code blocks to your code group

• 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

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

// Make sure to add code blocks to your code group

• 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

// Make sure to add code blocks to your code group

• 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.

// Make sure to add code blocks to your code group