CODEWITHSUNDEEP
reactjsreact-intl
Peter
Peter

Reputation: 2442

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

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.

Upvotes: 7

Views: 3298

Answers (2)

TheHorizon
TheHorizon

Reputation: 145

You can use separate intl object using: https://formatjs.io/docs/react-intl/api#createintl

Then use it e.g.:

const frIntlCache = createIntlCache()

const frIntl = createIntl({
  locale: 'fr-FR',
  messages: {messagesEn}
}, frIntlCache)

<IntlProvider locale='en' messages={messagesEn} >
  <FormattedMessage id='message.hello' />         // Hello
  {frIntl.formatMessage({id: 'message.hello'})}   // Bonjour
</IntlProvider>

Upvotes: 0

Damien
Damien

Reputation: 307

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>

Upvotes: 2

Related Questions