Open Tanney-102 opened 6 months ago
Hmm, so why you need to use nested provider? To render modals under a new window's DOM?
To render modals under a new window's DOM?
yes!
Nested usage is only a subset of the problem - the same problem occurs with providers in different places in the React tree.
We have this issue in a shadow DOM context. That would usually be a web component, but we're using it for micro-frontends, where parts of the ui are in isolated containers with their own shadow DOMs. I was quite surprised to see modals rendered inside another shadow DOM - I was expecting the NiceModal.Provider context to contain everything, also registered modals etc, so that each provider would work independently from each other, just by using the closest provider ancestor.
Hello, thanks for this good library. I've always used it well. I'm opening this issue because I have a suggestion.
I found that the
dispatch
is declared as global variable. In a situation that you have a single provider, this isn't a big deal. But this is problem if you are using more than one provider.When NiceModal.provider is called, the global dispatch is updated with
givenDispatch
or new dispatch function that returned from useReducer hook.If you use multiple providers, the global dispatch will be updated with dispatch function intended by the last called provider. And every modals will only be rendered under this last provider because all methods in library (like NiceModal.show) use global dispatch.
I know that this is not common case. In our team, we open new window and render components with react portal. In this case we should use multiple providers to render modals in new window.
So I suggest following.
provide dispatch function with context
Thanks for reading. Please consider and respond.