Skip to main content
Skip table of contents

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 namePackage name src assetslangs

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

  1. Import library

    1. import { useTranslation } from "react-i18next";

  2. 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>
        )
    }
}

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.