Localization

Monite UI Widgets support a localization mechanism. It allows you to:

• customize any text labels in the widgets (for example, rename "Counterpart Name" to "Supplier Name"),
• translate the labels into one or more other languages.

There are two implementation approaches you can use, depending on your requirements.

Approach 1: Pass custom labels directly to MoniteProvider

If you need to change just a few text labels, you can specify them in the locale property of the root <MoniteProvider> component as shown below. In this example, we replace the "Counterpart Name" and "Counterpart" labels with "Supplier Name":

<MoniteProvider  
  monite={monite}  
  locale={{
    messages: {
      "Counterpart Name": "Supplier Name",
      "Counterpart": "Supplier Name"
    }
  }}>
  ...
</MoniteProvider>

In the messages object:

• The keys are the keys of the labels you wish to replace. You can find all available keys here - look for the msgid strings. The keys mostly match the exact text labels that you see in the interface.
• The values are the new labels to use.

Any other labels not specified in the messages object will keep their original text.

Approach 2: Use PO files

PO (Portable Object) is the standard file format for localization. A PO file is a text file that includes the original texts and the translations.

Monite SDK includes a template PO file here that you can use or pass to your translators. This can be useful if you want to add multiple translations to your project.

The typical procedure is:

1. Copy the template file somewhere and open it in a translators' tool (such as СrowdIn or similar).

2. Create a new locale and translate the messages.

3. Save the translations to a new messages.po file. Put this file into the src/locales/{locale} directory of your project, where {locale} is your locale name. For example, if you use the en locale, the file path would be src/locales/en/messages.po.

4. Create the lingui.config.js file in the root directory of your project (next to the package.json file), with the following contents:

   JavaScript

   module.exports  =  {  
     locales: ["en"],  // your locale code, could be 'de', 'fr', etc.
       catalogs: [{  
         path: "src/locales/{locale}/messages"  // DO NOT replace "{locale}" with anything  
       }],  
     compileNamespace: "es",  // also available to build 'ts' or 'cjs' modules  format: "po"  
   }
   

5. Run npx @lingui/cli compile.

6. Use the generated messages.mjs file to pass the translated messages to the <MoniteProvider>:

   JavaScript

   import { messages } from './locales/en/messages.mjs'
   ...
   
   <MoniteProvider monite={monite} locale={messages}>
     ...
   </MoniteProvider>