Use React-Intl API outside React component

formatMessage.js

import { IntlProvider } from 'react-intl';

const language = 'en';
// Usually messages is declared in another file.
const messages = {
  greeting: 'Hello'
}
export const mesg = defineMessages({
  greeting: {
    id: 'greeting',
    defaultMessage: 'Whats up'
  }
};

const { intl } = new IntlProvider({ locale: language, messages: messages }, {}).getChildContext();
intl.formatMessage(mesg.greeting); // "Hello"
intl.formatNumber(1000); // "1,000"

This is missing a closing paren on defineMessages.

What is defineMessages and where can I get it?

UPD: ah, also should be imported from react-intl

outside components, such as in sagas
this may be helpful.

Is there anything wrong using this way inside the react components? It looks simpler than wrapping every component with injectIntl and then accessing intl prop. This way I can just import intl into every component.

With the new update to react-intl, this no longer works. Anyone have an update?

With the new update to react-intl, this no longer works. Anyone have an update?

https://github.com/formatjs/react-intl/blob/master/docs/API.md#createintl

Hello, I found this createIntl method but I can't understand how to make it work in a Non React file.

Would anyone have a hint on how to implement it ?

Ok, found out. When they write :

// Call imperatively
intl.formatNumber(20)

// Pass it to IntlProvider
{foo}

It means you can do one of them, both, but they are separate ways of using it. It's more : the first one OR the other.