2

I'm using the react-intl library for internationalization. Inside a component, I use the injectIntl HOC to translate message keys:

import {injectIntl} from 'react-intl';

const Component = props => (
    const message = props.intl.formatMessage({id: 'message.key'});
    // remainder of component omitted
);

export default injectIntl(Component);

Is it possible to get a message translation if I'm not inside a component?

Dónal
  • 185,044
  • 174
  • 569
  • 824
  • Possible duplicate of [React-intl define messages outside of react](https://stackoverflow.com/questions/42414416/react-intl-define-messages-outside-of-react) – sergioviniciuss Jul 24 '19 at 07:03

1 Answers1

7

Yes it is! You have to setup you application to provide the intl object so that you can use it from outside react components. You will have to use the imperative API for these cases. You can do something like this:

import { IntlProvider, addLocaleData, defineMessages } from 'react-intl';
import localeDataDE from 'react-intl/locale-data/de';
import localeDataEN from 'react-intl/locale-data/en';
import Locale from '../../../../utils/locale';

addLocaleData([...localeDataEN, ...localeDataDE]);
const locale = Locale.getLocale(); // returns 'en' or 'de' in my case

const intlProvider = new IntlProvider({ locale, messages });
const { intl } = intlProvider.getChildContext();

const messages = defineMessages({
  foo: {
    id: 'bar',
    defaultMessage: 'some label'
  }
});
const Component = () => (
  const componentMessage = intl.formatMessage(messages.foo);
);

I've done a different setup for me, but I guess this should work for you.

sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
  • The proposed solution won't work _as is_ because there are 2 variables named `messages` – Dónal Oct 04 '18 at 09:23
  • I forgot to rename it when I edited the code! just did it, but it's just a matter of renaming the variables :) – sergioviniciuss Oct 04 '18 at 09:25
  • Shouldn't defineMessages() be intl.defineMessages()? – izSaad Mar 05 '19 at 11:07
  • 2
    @DivisionSi I edited the answer just to fit your question. Just import defineMessages from react-intl and it's fine :) – sergioviniciuss Mar 05 '19 at 12:14
  • @Dónal could you accept the answer? Do you still have any questions? – sergioviniciuss May 07 '19 at 07:59
  • @Periback what's `utils/locale.js` that exports `Locale`? – Dónal May 07 '19 at 08:56
  • it's just a local function I created to get locale in my own application. When you create an new IntlProvider instance, you need to pass the locale of your application. you can just pass 'en', for example... for english.. You can handle it the way you want.. just pass the locale in this format and it should be fine :) – sergioviniciuss May 07 '19 at 08:59
  • @Dónal do you still have any questions? – sergioviniciuss May 08 '19 at 13:32
  • changed it to getLocale which is proper (althought not related to your OP). Anything else, sir? – sergioviniciuss May 08 '19 at 15:45
  • @Dónal Is there anything else related to the OP, which means, how to use react-intl outside react components? – sergioviniciuss May 09 '19 at 11:51
  • @Dónal anything else? – sergioviniciuss Jun 18 '19 at 07:20
  • 1
    @Periback I get it, you want me to accept the answer. No further "anything else" questions are necessary. – Dónal Jun 18 '19 at 12:52
  • 1
    Could you at least explain to me why can't you accept it then? It is explicitly a solution for using react-intl to translate messages outside react components. I'm using it as I have to translate error messages in my yup validation schema. It's also the suggested approach they recommended in this thread: https://github.com/formatjs/react-intl/issues/416 – sergioviniciuss Jun 24 '19 at 07:43
  • This code is out of date and you also use `messages` before defining it. – Ini Jul 21 '22 at 08:55