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
Copy
src └── locale ├── en.json └── index.ts
en.json Contains,It will have just normal json object like,
Copy
{ "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.
Copy
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:
Copy
import { useTranslation } from 'react-i18next';const ExpBanner = () => { const { t } = useTranslation(); return ( <div> Next word is translated: {t('common.model_select_msg')} </div> );}