Using nested NiceModalProvider for new window

[Tanney-102]

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.

const InnerContextProvider: React.FC = ({ children }) => {
  const arr = useReducer(reducer, initialState);
  const modals = arr[0];
  dispatch = arr[1]; // update with new dispatch
  return (
    <NiceModalContext.Provider value={modals}>
      {children}
      <NiceModalPlaceholder />
    </NiceModalContext.Provider>
  );
};

export const Provider: React.FC<Record<string, unknown>> = ({
  children,
  dispatch: givenDispatch,
  modals: givenModals,
}: {
  children: ReactNode;
  dispatch?: React.Dispatch<NiceModalAction>;
  modals?: NiceModalStore;
}) => {
  if (!givenDispatch || !givenModals) {
    return <InnerContextProvider>{children}</InnerContextProvider>;
  }
  dispatch = givenDispatch; // update with givenDispatch
  return (
    <NiceModalContext.Provider value={givenModals}>
      {children}
      <NiceModalPlaceholder />
    </NiceModalContext.Provider>
  );
};

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.

function SomeApp() {
  return (
    <NiceModal.Provider> // update global dispatch
      <SomeArea />
      <NiceModal.Provider> // update global dispatch again
        // the modal dispatched in 'SomeArea' will be rendered here 
      </NiceModal.Provider />
    <NiceModal.Provider />
  )
}

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.

function NewWindow({ children }) {
  const [container] = useState(() => {
    const newWindow = window.open()
    const container = newWindow.document.createElement('div')
    newWindow.document.body.append(container)
    return container
  })

  return ReactDOM.createPortal(children, container)
}

function SomeApp() {
 return (
    <NiceModal.Provider>
      ...
      <NewWindow>
        <NiceModal.Provider>
          ...
        </NiceModal.Provider>
      </NewWindow>
    </NiceModal.Provider>
   )
}

So I suggest following.

• provide dispatch function with context

  const InnerContextProvider: React.FC = ({ children }) => {
    const arr = useReducer(reducer, initialState);
    const modals = arr[0];
    dispatch = arr[1];
  
    return (
      <NiceModalContext.Provider value={modals}>
        <NiceModalDispatchContext.Provider value={dispatch}
          {children}
        </NiceModalDispatchContext.Provider>
        <NiceModalPlaceholder />
      </NiceModalContext.Provider>
    );
  };
  

• use the dispatch from context in showCallback that is returned by useModal hook

  export function useModal(modal?: any, args?: any): any {
    ...
    const dispatch = useContext(NiceModalDispatchContext)
    ...
    const showCallback = useCallback((...) => {
      ...
      dispatch(showModal(...))
    }, [...]
  }
  

Thanks for reading. Please consider and respond.

[supnate]

Hmm, so why you need to use nested provider? To render modals under a new window's DOM?

[Tanney-102]

To render modals under a new window's DOM?

yes!

[mikkelblanne]

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.

[AndreLei]

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.

I'm encountering same issues as @mikkelblanne. Is there any plan to include this fix?