Simple change to make debugging with React DevTools a little bit easier by having a non-generic displayName. Also a component namespace that closer matches the import.
In the devtools window the "StripeProvider" component currently shows up as <Provider> this change would make it show up as With the generic name of "provider" it can be a little annoying debugging if you have multiple providers all with the same generic displayName.
Also this attempts to remove some confusion with the import { StripeProvider } from 'react-stripe-elements showing up as Provider in the component tree and any associated warnings that React now throws for 17.* compatibility.
My real motivation for this is an issue with a project that has multiple generic named "Provider" components and I was tracking the following a warning down:
After a little bit of digging realized it was related to react-stripe-elements as it has a context provider just named <Provider> even though the import is <StripeProvider>
Testing & documentation
Use React DevTools to confirm that the "correct" displayName is present.
Summary & motivation
Duplicate Feature of a PR I just made for @stripe/react-stripe-js https://github.com/stripe/react-stripe-js/pull/30
Simple change to make debugging with React DevTools a little bit easier by having a non-generic displayName. Also a component namespace that closer matches the import.
In the devtools window the "StripeProvider" component currently shows up as With the generic name of "provider" it can be a little annoying debugging if you have multiple providers all with the same generic displayName.
<Provider>
this change would make it show up asAlso this attempts to remove some confusion with the
import { StripeProvider } from 'react-stripe-elements
showing up asProvider
in the component tree and any associated warnings that React now throws for 17.* compatibility.before after
If you're unfamiliar with the context displayName documentation is here: https://reactjs.org/docs/react-component.html#displayname
My real motivation for this is an issue with a project that has multiple generic named "Provider" components and I was tracking the following a warning down:
After a little bit of digging realized it was related to
react-stripe-elements
as it has a context provider just named<Provider>
even though the import is<StripeProvider>
Testing & documentation
Use React DevTools to confirm that the "correct" displayName is present.