Important

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

Localization

The extension boilerplate integrates react-intl, a widely used localization library for React. You can use it to localize your extension for different languages and locales. The full react-intl API is available in your extension.

Adding a new string

To add a new string, edit one of the localization files in the src/translation folder of your extension project. Files are organized by language, with key-value pairs for each localized string.

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 use this string in your code:

import { FormattedMessage } from 'react-intl';

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

Adding variables and HTML

To include variables or HTML in localized strings, use the FormattedMessage component from 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>"
}

Use the string in your code as follows:

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

Adding a new locale

To add a new locale (for example, French or German), copy en.json and rename it to the locale code (for example, fr.json or de.json). Translate the strings in the new file. To get the correct locale code, use the useMarketplaceContext hook from the SDK to read it from the marketplace context.

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

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