Manage internationalization

Internationalization is the process of designing your project to support multiple languages and regions. It will be provided by Experro’s basetheme, integrated for the default channel in English - United States with the language code en-us. you can take a look at the main configoration files, under

src
 └── locale
      ├── en.json
      └── index.ts

en.json Contains, It will have just normal json object like,

{
  "translation": {
      "common": {
        "model_select_msg": "Please select a record"
      }
    // Object keys for internalization,
  }
}

index.ts

When creating a new config file for another language, remember to add an entry in the index.ts file of the locale folder.

import en from './en.json';

// NOTE 1 : Ensure that each key in the following object is formatted according to the specified pattern: "en-US" or 'en-MX'.
//          The language code before the '-' should be lowercase, while all characters after the '-' should be uppercase.

// NOTE 2 : Ensure that the object name 'exp_lang' remains unchanged; otherwise, it may not function as expected.
// NOTE 3 : For the default or fallback language, use the key 'en' exclusively, as demonstrated in the following object.
const exp_lang: any = { 'en-US': en };

export { exp_lang };

That’s all for setting up internationalization and configuration. Here’s how you can use internationalization during theme development:

import { useTranslation } from 'react-i18next';

const ExpBanner = () => {
    const { t } = useTranslation();

    return (
        <div>
            Next word is translated: {t('common.model_select_msg')}
        </div>
    );
}

That’s all—it’s that easy to use!

Getting Started

Overview

Theme Components

Create Custom Widget

Theme Templates

Experro CLI

Other

Manage internationalization