React-intl define messages outside of react

Question

I have utils.js file.

export function categoryIdToCategoryName(categoryId) {
let name;
switch (categoryId) {
    case constants.RISK_CATEGORY_LOW:
        na         


        

Answer 1

I think in your case you want to have access to the intl object but this file is not a react component, right? If it is the case, you'd have to create a provider inside this file, something similar to what you probably already have in your index.js file.

In your utils.js file you'd add this:

import { IntlProvider, addLocaleData } from 'react-intl';
import localeDataEN from 'react-intl/locale-data/en';
import { translations } from '../point-to-your-translation-file';

addLocaleData(localeDataEN);
const locale = 'en'
const messages = //read it from your translated json file
const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext(); // this is how you get access to the formatMessage function to use i18n for your messages

function categoryIdToCategoryName(categoryId) {
let name;
switch (categoryId) {
    case constants.RISK_CATEGORY_LOW:
        name = intl.formatMessage(formMessages.riskLow);
        break;
    case constants.RISK_CATEGORY_MEDIUM:
        name = intl.formatMessage(formMessages.riskMedium);
        break;
    case constants.RISK_CATEGORY_HIGH:
        name = intl.formatMessage(formMessages.riskHigh);
        break;
    case constants.RISK_CATEGORY_CRITICAL:
        name = intl.formatMessage(formMessages.riskCritical);
        break;
    default:
        console.warn('see: /utils/risk.js', 'categoryIdToCategoryName:', categoryId);
        name = 'unknown';
   }
    return name;
}

You can also check this answer: React-intl for non components