CODEWITHSUNDEEP
javascriptreactjsreact-intlformatjs
Pavlo
Pavlo

Reputation: 44967

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

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?

Upvotes: 0

Views: 1892

Answers (2)

Ewelina Kryszczynska
Ewelina Kryszczynska

Reputation: 1

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

Upvotes: -1

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

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)

Upvotes: 0

Related Questions