SDK localization
Learn how to rename and localize UI labels in Monite React SDK.
Monite's React SDK support a localization mechanism. The React SDK defaults to the browser's locale for handling localization within SDK components. However, you can explicitly define localization using the code
prop on the MoniteProvider
wrapper.
Use Monite's custom localization mechanism for any of purposes:
- To define currency formatting and usage of delimiters and decimal separators using the
code
property. - To define date formats by country or region using the
code
property. - To customize any text labels in the widgets (for example, rename "Counterpart Name" to "Supplier Name").
- To 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 the MoniteProvider
component
MoniteProvider
componentIf you need to change just a few text labels, you can specify them in the locale
property of MoniteProvider
component as shown below. In this example, we replace the "Counterpart Name" and "Counterpart" labels with "Supplier Name":
<MoniteProvider
monite={monite}
locale={{
code: "en-US",
messages: {
Counterpart Name: "Supplier Name",
Counterpart: "Supplier",
Sales: "Incoming transactions",
}
}}>
...
</MoniteProvider>
The code
prop is an optional property that handles the usage of delimiters and decimal separators for different currency regions. It also handles the date formatting across various UI components. The accepted format for the code
property must adhere to the BCP-47 language tag standard.
The messages
prop is an object used to define text translations and customizations. In the messages
object:
- The keys represent the text labels in the React SDK UI that you wish to replace. You can find all available keys on Monite's Portable Object template—look for the
msgid
strings. The keys match the exact text labels that you see in the UI. - The values are the new text to use in place of the object's keys. Values can be of any language, and you can customize these values as required.
Any other labels not specified in the messages
object will keep their original text.
Approach 2: Use portable object files
Portable Object (PO) 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:
-
Copy the template file somewhere and open it in a translators' tool (such as СrowdIn or similar).
-
Create a new locale and translate the messages.
-
Save the translations to a new
messages.po
file. Put this file into thesrc/locales/{locale}
directory of your project, where{locale}
is your locale name. For example, if you use theen
locale, the file path would besrc/locales/en/messages.po
. -
Create the
lingui.config.js
file in the root directory of your project (next to thepackage.json
file), with the following contents: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" }
-
Run
npx @lingui/cli compile
. -
Use the generated
messages.mjs
file to pass the translated messages to the<MoniteProvider>
:import { messages } from './locales/en/messages.mjs' ... <MoniteProvider monite={monite} locale={messages}> ... </MoniteProvider>
Updated 27 days ago