Important

This feature is currently in Early Availability (EA) status. For more information, see our product lifecycle phases.

Localization

At AppDirect, we recognize the significance of localization for customers operating across various markets. Our platform extensions boilerplate app integrates react-intl, a widely-used localization library for React applications. This integration enables seamless localization of your front-end pages to cater to your audience's requirements. The comprehensive react-intl API is accessible, granting you complete access to its features and capabilities.

Adding a New String

To introduce a new string, modify one of the localization files in the src/translation folder of your platform extensions project. These files are organized by language, each containing key-value pairs representing the language-specific localized strings.

1. Open en.json in your preferred text editor.
2. Identify the file section corresponding to the component or feature where the new string is needed. If no such section exists, create a new one with a descriptive name.
3. Insert a key-value pair in the section, using a descriptive name for the key.
4. Ensure adherence to JSON best practices, including proper quoting and formatting.

{
    "myNewString": "This is my new string"
}

To leverage this string in your code you can use the following code snippet:

import { FormattedMessage } from 'react-intl';

<FormattedMessage id="myNewString" defaultMessage="This is my new string" />

Adding variables and HTML:

Sometimes, you may need to include variables or HTML in your localized strings. To do this, you can use the FormattedMessage component provided by react-intl.

1. In the localization file, include the variable or HTML in the string, surrounded by curly braces or HTML tags, respectively.
2. In your code, import the FormattedMessage component from react-intl.
3. Use the FormattedMessage component with the id prop set to the key of your localized string and the values prop set to an object containing any variables or HTML you need to include.

Adding variables and HTML to a string:

{
    "myNewString": "This is my new string with a variable {variable} and a link <a href='https://www.appdirect.com'>AppDirect</a>"
}

You can then use this string in your code like this:

<formattedMessage id="myNewString" values={{variable: 'my variable',  a: chunks => (<a href="https://www.appdirect.com">{chunks}</a>)}} />

Adding a new locale:

If you need to add a new locale, such as French or German, you can simply copy the en.json file and rename it to the appropriate locale code, such as fr.json or de.json. You can then translate the strings in this file to the appropriate language. To know the exact locale code to use, you can extract it from the marketplace context using the useMarketplaceContext hook provided by our SDK.

import useMarketplaceContext from "../../hooks/useMarketplaceContext";

const { bootstrap, tenant, locale } = useMarketplaceContext();