Is it possible to reuse `intl` context from IntlProvider?

Question

I have a component (popup) that renders outside of the tree (aka portal), therefore losing the context of IntlProvider:

<IntlProvider locale="en">
    <App />
</IntlProvider>
// * <- renders here

Redux solves the same issue by allowing to pass store instance as a prop for the component:

import store from "./store";

const Component = () => <Popup store={store} />;

Is there a similar approach I can use for ReactIntl?

You can certainly pass the `intl` object to your popup. – Aaron Beall Jan 29 '18 at 14:21 — Aaron Beall, Jan 29 '18 at 14:21

score 0 · Accepted Answer · edited May 10 '18 at 13:23

0

You can use injectIntl HOC with injects intl into your component.

Simply change you code from:

const Component = () => <Popup ... />

to:

import { injectIntl  } from 'react-intl';
const Component = ({ intl }) => <Popup intl={intl} />
export default injectIntl(Component)

edited May 10 '18 at 13:23

Fawaz

answered Jan 29 '18 at 13:44

Hemerson Carlin

I think that for `injectIntl` to work, the exported component will still need to be within the component hierarchy under `IntlProvider`. – solimant Jan 15 '21 at 07:43

score -1 · Answer 2 · answered Jun 10 '20 at 09:03

-1

if you dont want to wrap your component into HOC, useIntl hook is good too :)

answered Jun 10 '20 at 09:03

1

While you somewhat answer this question, you should add working code example to your answer. Read [How to write an answer](https://stackoverflow.com/help/how-to-answer)!? – richardev Jun 10 '20 at 09:21

2 Answers2