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.