React lib overriding your web app context

TomPradat — Thu, 16 Jan 2020 20:14:31 +0000

Hi, I was wondering about good patterns concerning the react context.

Let's get a public library, for example react-intl that exposes a Provider (IntlProvider).
Let's create a library barLib that uses react-intl to manage translations internally and that also exposes a Provider.
Now let's imagine I create a web app and use both barLib and react-intl.

I don't expect the barLib to ever override my react-intl context, because i'm not aware it uses internally the react-intl lib.
But the barLib can accidentally override the react-intl context => https://codesandbox.io/s/embedded-contexts-test-z8e7b

This kinda breaks the isolation of libs IMO.

I see several solutions :

Don't use an other lib context in the barLib (pretty extreme)
Check that there is not already an intl context in the barLib, if so merge the context values ?

I'm not convinced with either solutions, what do you guys think about it ?

UPDATE :

IMO the right way is to NEVER implement yourself a provider from a third-party library, you should just document your library so that users know they should wrap your components with the needed provider.

Exemple : If you want to use react-intl, just use it and tell people that your component must be wrapped into a react intl provider.

DEV Community: TomPradat

React lib overriding your web app context