Localization samples

Localizing via local dictionaries

This sample demonstrates a Hello World widget with a localized label. By using this approach, you can localize any resource in your widget.
Let’s assume your application supports three cultures: English, German and Bulgarian. Different dictionaries, which are objects that map resource keys to localized strings, are maintained. There should be a separate dictionary for each culture your app supports. In this case, we have three separate json files in a dictionary folder ~/src/app/widgets/localization/dictionaries: 

• en, 
• de,
• bg.

After that, you can use these dictionaries to fetch the necessary strings in your widget by requesting them with the currently selected culture:

The required labels are localized from the dictionary according to the requested culture of the page.

In this approach, you first need to configure i18n. You can reference this sample configuration:

Pass the i18n instance to react-i18next. Import the dictionaries and pass them as resources on the i18n initialization. 
For all the i18n initialization options, see i18next documentation.

After that, you can use the localization with these dictionaries in your widget by using the Trans tag with the needed key from the dictionary like this:

Set the currently selected culture:

i18n.changeLanguage(props.requestContext.culture);

Here is a sample integration:

The required labels are localized from the dictionary according to the requested culture of the page.

Another way to translate properties is manually through the widget designers. This can be done by exposing the localized resources as properties in the widget designer. In this example, it is demonstrated via the Content property. After the translation, the widget resolves the version of the properties for the current language of the page. Except for the Section widget, all the other widgets support property localization and each property can be localized independently. Additionally, when working on a synced page, you can override all translated versions with the current one by saving the widget with the option Save all translations.