Two providers in a React component

Question

I'm looking to implement stripe elements in my React app and looks like there's a nice wrapper that I can use.

However, in the article, the author says we must use the StripeProvider and he implements it at the root App component level -- see https://github.com/stripe/react-stripe-elements#getting-started

I need to use my own provider to connect to my store. How do I use two providers in my component? I'm not even sure if this is a good idea.

My current render method looks like this:

render(
    <Provider store={store}>
        <App>
            <SomeComponentInMyApp />
        </App>
    </Provider>,
    document.getElementById('content-wrapper')
);

Would I wrap one provider around the other?

Answer 1

Yup, you should be able to wrap as many providers as you want:

render(
  <ProviderA whatever={3}>
    <ProviderB store={store}>
      <App>
        <SomeComponentInMyApp />
      </App>
    </ProviderB>
  <ProviderA>,
  document.getElementById('content-wrapper')
);

A provider is a Higher-Order Component that should just hook into React and provide additional capabilities (usually on the context) without altering anything or removing existing functionality.

That also means that the order of providers doesn't really matter unless for some reason providers depend on each other's existence.

Another example could be the ThemeProvider from styled-components.

You might run into a problem if you nest the same provider multiple times as they might potentially interfere with each other but in general a provider pattern is a common approach to decorate a react app with functionality available across the app without needing to pass that functionality to each component individually.