How to use different locale for react nested components?

[Bertg]

In our product development we usually release our product in English first, and then (over a few hours or days) bring in the translations for more languages.
This has as an issue that in that period we may have incomplete or bad translations. It should fall on process for this not to happen, but it does and is time and resource intensive.

What we would like to do, is to "override" the locale for a specific subtree of react components. In pseudo react:

<I18nProvider i18n={i18n}>
  <Component>
    {...}
    <I18nLocaleOverride locale="en">
      <NewComponents />
    </I18nLocaleOverride>
  </Component>
</I18nProvider>

Obviously we would control the state of the I18nLocaleOverride with a feature flag, but this is out of the scope of this request. The important part is that we should not have to change the implementation of NewComponents and its children.

Is this possible with lingui?

[timofei-iatsenko]

Yes it's possible. Simply wrap your subtree in another I18nProvider with separate i18n instance.