Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-intl define messages outside of react

I have utils.js file.

export function categoryIdToCategoryName(categoryId) {
let name;
switch (categoryId) {
    case constants.RISK_CATEGORY_LOW:
        name = 'low';
        break;
    case constants.RISK_CATEGORY_MEDIUM:
        name = 'medium';
        break;
    case constants.RISK_CATEGORY_HIGH:
        name = 'high';
        break;
    case constants.RISK_CATEGORY_CRITICAL:
        name = 'critical';
        break;
    default:
        console.warn('see: /utils/risk.js', 'categoryIdToCategoryName:', categoryId);
        name = 'unknown';
   }
    return name;
}

I would like to translate this texts - [low, medium, high, critical] using https://github.com/yahoo/react-intl. So I defined messages

const translations = defineMessages({
riskLow: {
    id: 'utils.risk.low',
    defaultMessage: 'low',
},
riskMedium: {
    id: 'utils.risk.medium',
    defaultMessage: 'medium',
},
riskHigh: {
    id: 'utils.risk.high',
    defaultMessage: 'high',
},
riskCritical: {
    id: 'utils.risk.critical',
    defaultMessage: 'critical',
}
});

And now what is the last step?

How can I pass the messages back to the function? There should be formatMessage function but it's only in react context.

like image 609
dfgd Avatar asked Feb 23 '17 11:02

dfgd


People also ask

What does Intl formatMessage return?

formatMessage returns an array instead of a string #1681.

Can I use INTL IN react native?

React Native​ If you're using react-intl in React Native, make sure your runtime has built-in Intl support (similar to JSC International variant).

What is injectIntl?

injectIntl HOC​ This function is exported by the react-intl package and is a High-Order Component (HOC) factory. It will wrap the passed-in React component with another React component which provides the imperative formatting API into the wrapped component via its props .


2 Answers

It can now be done with the CreateIntl API (version 4.6.4 React-intl)

Here is a code snippet that is working for me :

import { createIntl, createIntlCache } from 'react-intl';
import English from '../../translations/en-US.json'; //your messages translated with id

const cache = createIntlCache();
const intl = createIntl({ locale: 'en-US', messages: English, }, cache);//locale and message can come from Redux or regular import
const number = intl.formatNumber(2000); //just use imperative way like you would with useIntl() hook or InjectIntl HOC
like image 194
Yoann Buzenet Avatar answered Nov 10 '22 17:11

Yoann Buzenet


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

like image 40
sergioviniciuss Avatar answered Nov 10 '22 18:11

sergioviniciuss