Standard way of using react-intl dynamically about formatjs HOT 4 CLOSED

@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.

from formatjs.

@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!

from formatjs.

See: #162

from formatjs.

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.

from formatjs.