Language Resources

Because the react-i18next library is used in the Dart-Platform, you can support multiple languages on your module by using the same i18next method. Then the multiple languages will be supported within the Dart-Platform.

Info.

i18next is internationalized framework written with JavaScript which allows handling of multiple national languages.
You can find index.tsx file in EXPLORER window
- Project name ▸ Package name ▸ src ▸ assets ▸ langs

Document - Guides - Advanced User Guide - Module Resources - Language resources

Use language resources in index.tsx

Registering multilingual is simple.

Step 1. Define the language to use in this module within the index.ts file.

index.ts is a file for multilingual resource file (json) that exists under langs. Define and export stringResources as follows.

CODE

import en from "./en.json";
import ko from "./ko.json";

const stringResources = {
    en,
    ko
};

export default stringResources;

Currently Dart-Platform officially supports 11 languages as following (expected).

CODE

import ko from "./ko.json";
import en from "./en.json";
import nl from "./nl.json";
import it from "./it.json";
import zh from "./zh.json";
import de from "./de.json";
import fr from "./fr.json";
import es from "./es.json";
import ja from "./ja.json";
import cs from "./cs.json";
import hu from "./hu.json";

const stringResources = {
    en,
    ko,
    nl,
    it,
    zh,
    de,
    fr,
    es,
    ja,
    cs,
    hu,
};

export default stringResources;

Step 2. Create {language_code-REGION}.json each in langs folder and define resource of each language by key:value pair.
- For example the file name can be en.json, and ko.json.

CODE

{
  //module package name
  "{app_package_name}": {
    //"key": "value"
    "example_key" : "Example Value",
    "app_name" : "test module",
  }
}

Step 3. There are two following ways to support multilingual in index.tsx .
- Method 1. Function Type React component
- Method 2. Class type React component

Method 1. Use in Function type React component

Import library
1. import { useTranslation } from "react-i18next";
Use Translation Function
1. const { t } = useTranslation();
2. {t("app_name", { ns: packageName })}

CODE

// index.tsx 
import { ThemeProvider } from "@mui/material/styles";
import { useTranslation } from "react-i18next";
...
class MainScreen extends ModuleScreen {
    ...
    render(){
        return(
            <ThemeProvider theme={this.systemTheme}>
                <AppName/>
            </ThemeProvider>
        )
    }
}

function AppName(props: { moduleContext: ModuleContext }) {
    const { moduleContext } = props;
    const { packageName } = moduleContext;
    const { t } = useTranslation();

    return (
        <div>
           <h3>{t("app_name", { ns: packageName })}</h3>// Use Module's language resource
           <h3>{t("app_name")}</h3> // Use System (Dart-Platform)'s resources
        </div>
    );
}

Method 2. Use in Class type React component

CODE

// index.tsx 
import { ThemeProvider } from "@mui/material/styles";
import { Translation } from "react-i18next";
...
class MainScreen extends ModuleScreen {
    ...
    render(){
        return(
            <ThemeProvider theme={this.systemTheme}>
                <Translation>
                     t =>
                          <section className={styles["container_servo-switch"]}>
                              <h3>{t("app_name", { ns: this.moduleContext.packageName })}</h3> // Use App's language resource
                              <h3>{t("app_name")}</h3> // Use System (Dart-Platform)'s resources
                          </section>
                <Translation>
            </ThemeProvider>
        )
    }
}