Standard way of using react-intl dynamically

[AntonioAcevedo]

Hi, I just start using react-intl to integrate i18n in my ReactJS application and have 2 questions because I don't know If I am doing thing "the react-intl way":

A)

I need to select the language in a dynamic way based on navigator.language / navigator.browserLanguage value and providing fallback mechanism.

I have been reading that, at this moment, there is no fallback mechanism implemented in react-intl ([https://github.com//issues/35][1]) and the way of doing it could be to generate complete properties files during the packaging process (webpack, gulp, etc) rather than trying to look it up at runtime.

B)

I need to import the messages file in a dynamic way based on this language variable so I though about using the dynamic import syntax provided by ecmascript 6.

System.import('../i18n/messages/messages-'+lang)
    .then(some_module => {
        alert("Messages found and loaded successfully");
    })
    .catch(error => {
        alert("Messages NOT found.It will be used english by default");
    });

Is this approach correct or is there a more standard approach?

[caridy]

@AntonioAcevedo it seems that a bunch of people are having a hard time trying to imagine how to architect their app in such a way that passing intl messages around is not problematic. we should probably provide some guidance about this, but so far, we have tried hard not to be opinionated on how you should do this, since that belongs to the user-land.

I will make sure we answers those questions soon.

As for the fallback, react-intl does support fallback on locales, saying if you want to format a number, and you pass locales=['en-FO', 'en'] it will fallback to en since en-FO is not available. But falling back to a message is a completely different thing, because resolving the right message is in the user-land, and locales is only used by the primitive operations (numbers and dates), so you're on your own for the messages. There are few issues (closed) in this repo where we give some recommendations, you should probably look them up.

[AntonioAcevedo]

@caridy thank for that info!

Finally we decided to use a very similar approach to react-locale-hot-switch using webpack and a fallback mechanism to fullfill the messages json object (i.e. "es-es" get the messages from "en", "es" and "es-es" and merge them).

We have an I18nStore included as a dependency to our main component (using DependentStateMixin from NuclearMail).

So each time this I18NStore emits a change the main component detects it and propagate it across all the application.

One problem it is that we need to add the locale as state to each component if we want to take advantage from PureRenderMixin.

I am sure there are better solutions but hope it makes sense!

[ericf]

See: #162

[fabianovalle]

I have a question about Reactntl, i need to translate my web app at runtime, every combo change i change my app language, someone know how to do it ?

js lang files

en

{
"register.client": "Register Client",
"register.name" : "Name",
"register.address" : "Address"
}

pt

{
"register.client": "Registrar Cliente",
"register.name" : "Nome",
"register.address" : "Endereço"
}

index.js

const messages = {
'pt': messages_pt,
'en': messages_en
};

const language = navigator.language.split(/[-_]/)[0];

console.log(navigator);

addLocaleData([...locale_en, ...locale_pt]);

ReactDOM.render(, document.getElementById('root'));

serviceWorker.unregister();

Best Regards.