Search code examples
javascriptreactjsreact-intlformatjs

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?

Solution

  • 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)