How to use different localization languages for different part of the application?

cuong-wintry-atom · September 5, 2022, 7:29am

Hi,

We are having a chat addon which has the following localization behavior:

The chat frame can have a different language from the client
The confirm change language modal inside the chat frame can have various localization languages depending on the language the user has chosen
The client can override the resources from the add-on which was already explained in this topic https://discourse.geta12.com/t/how-to-use-overriden-localization-resources-outside-of-the-react-context

image1954×728 180 KB

Showcase link: <INTERNAL_LINK>

Creating a new localizer from the add-on does not make sense since the add-on must display the overridden resources from the client.

I cannot find any possible solution for this feature in the current version of the client. Could you please suggest me an approach?

Thank you very much.

stefan-cold-haze · September 5, 2022, 8:08am

Hi,

you can use multiple LocalizerContexts in order to achieve your desired behavior. Each context will have a different language and just needs to be wrapped around the react part you want to have in a different language

cuong-wintry-atom · September 5, 2022, 8:46am

hi,
I think it is not a good approach since we support many languages and the language inside the chat frame/change language modal will show depending on the user’s chosen language.
So for example, we’re currently having 5 languages, so we would have to use 5 nested contexts?

stefan-cold-haze · September 5, 2022, 9:54am

I do not see the issue. The LocalizerContext is exactly for this use case and you are not restricted to provide a static locale to it. Depending on your user settings you can provide different locales to the context.

In your example from the screenshot you would have 3 contexts. One for every area with an independent locale.

EDIT

After talking to @chnguyen we found out that there locale feature is a build in solution to there components. They manage an independent locale for themselves. Therefore, the question is have to handle such a situation where you need to create your own context inside of you component.

Based on this information I think the best solution is a LocalizerContextProvider: (locale: Locale) => L10nContext supply to the components. This will enable users to customize the locatization and the add-on component is in control for the LocalizerContext.