Adding Internationalisation to the client-side of a C#Bot application

In this example we are going over how to add translation support to a React client-side in a C#Bot application.

Installing dependencies

In this example we are going to be using the react-i18next library. First we need to install the dependencies. In clientside/package.json add the following to the Add any custom libraries here protected region:

"i18next": "20.3.2",
"react-i18next": "11.11.0",

Configuring the library

Now we need to configure the translation files. For this example we are going to be embedding the translations into a JSON file on the client-side.

1. Create a new folder called clientside/src/Translations and make a new JSON file for each supported language in this folder. In this example we are going to be supporting English and French, so we will create en.json and fr.json.

2. Next we will populate these files with contents. In en.json add the following:

    {
        "translation": {
            "Welcome Message": "Welcome to the application",
            "Greet": "Hello ",
            "Hello World": "Hello World"
        }
    }
   

   And add the following in fr.json:

    {
        "translation": {
            "Welcome Message": "Bienvenue sur l'application ",
            "Greet": "Bonjour ",
            "Hello World": "Bonjour monde"
        }
    }
   

3. Now in clientside/src/App.tsx we need to configure the i18n library and use the translations that we have added.

   In the Add extra page imports here protected region add the following code:

    import i18n from "i18next";
    import { initReactI18next } from 'react-i18next';
    import enTranslations from 'Translations/en.json';
    import frTranslations from 'Translations/fr.json';
   

4. And then in the Add extra constructor logic here protected region add the following code:

    i18n
        .use(initReactI18next)
        .init({
            resources: {
                en: enTranslations,
                fr: frTranslations,
            },
            fallbackLng: "fr",
            interpolation: {
                escapeValue: false,
            }
        });
   

Now the translations are configured and are ready to use.

Using the Translations

Translations can be used for both class and functional components.

Class Components

Pages that are created by C#Bot are class components by default. These can be modified to use translations with a higher order component.

1. In the Add any extra imports here protected region add the following imports:

    import { withTranslation } from 'react-i18next';
    import { i18n, TFunction } from 'i18next';
   

2. In the Override export here change the page export to the following:

    export default withTranslation()(HomePage);
   

3. Next we need to add the necessary props to the component. In the Add any extra props here protected region add the following code:

    i18n: i18n;
    t: TFunction;
   

4. Now in the render method, we can add our translated code:

    const { t } = this.props;
   	
    // And in the return statement...
   	
    <div className="body-content">
        <h1>{t('Welcome Message')}</h1>
        <div>{t('Greet', {name: 'Citizen'})}</div>
    </div>
   

Function Components

Translations can also be added into any function components with a provided hook.

1. First add the following imports:

    import { useTranslation } from 'react-i18next';
   

2. Then you can add the useTranslation hook to your functional component:

    function FunctionalComponent() {
        const { t } = useTranslation();
        return <div>{t('Hello World')}</div>
    }