Is it possible to override locale of one specific intl.formatMessage?

Question

I use react-intl with en and fr, and my React app is wrapped in

<IntlProvider locale={lang}>

so that e.g. when lang is en, all intl.formatMessage calls result in English texts.

What I want to achieve is that I want <IntlProvider locale="en">, but inside the app, I need one specific intl.formatMessage to be translated into fr.

Answer 1

It is possible to add several IntlProvider in the same container. You must define for each the locale and the messages. Here a sample just with a FormattedMessage, but it can be bigger element:

<div>
  <IntlProvider locale='en' messages={messagesEn} >
    <FormattedMessage value={message.hello} />
  </IntlProvider>

  <IntlProvider locale='fr' messages={messagesFr} >
    <FormattedMessage value={message.hello} />
  </IntlProvider>
</div>