React-intl for non components

Question

Currently I have the following code to expose react-intl to non-components, but it throws an error for intl as undefined.

I have created a separate component as \'Curren

Answer 1

There's also another approach very simple I used for solving a similar problem: Provide access to the intl object for a non-component:

import { IntlProvider, addLocaleData } from 'react-intl';
import localeDataDE from 'react-intl/locale-data/de';
import localeDataEN from 'react-intl/locale-data/en';
import { formMessages } from '../../../store/i18n'; // I defined some messages here
import { Locale } from '../../../../utils'; //I set the locale fom here

addLocaleData([...localeDataEN, ...localeDataDE]);
const locale = Locale.setLocale(); //my own methods to retrieve locale
const messages = Locale.setMessages(); //getting messages from the json file.
const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext();

export const SCHEMA = {
  salutation: {
    label: intl.formatMessage(formMessages.salutationLabel),
    errormessages: {
      required: intl.formatMessage(formMessages.salutationError),
    },
  },
  academic_title_code: {
    label: intl.formatMessage(formMessages.academicTitleLabel),
  },
};

It's working like a charm!

UPDATE for v3.x

After migration to react-intl 3.x

import { createIntl, createIntlCache } from 'react-intl'
import { formMessages } from '../../../store/i18n'; // I defined some messages here
import { Locale } from '../../../../utils'; //I set the locale fom here

const locale = Locale.setLocale(); //my own methods to retrieve locale
const messages = Locale.setMessages(); //getting messages from the json file.
// This is optional but highly recommended
// since it prevents memory leak
const cache = createIntlCache();
const intl = createIntl({ locale, messages }, cache)

export const SCHEMA = {
  salutation: {
    label: intl.formatMessage(formMessages.salutationLabel),
    errormessages: {
      required: intl.formatMessage(formMessages.salutationError),
    },
  },
  academic_title_code: {
    label: intl.formatMessage(formMessages.academicTitleLabel),
  },
};