Utility function to create a dialog context in MUI v5, for dialogs opened across the application that need their state in context

createDialogContext.tsx

import { createContext, useContext, useState } from 'react';

class NoContextProviderError extends Error {
  constructor() {
    super('Context value was undefined');
  }
}

/**
 * Utility to create a context for a dialog, to reduce boilerplate
 */
export default function createDialogContext() {
  // we use 2 separate contexts so that when the open state of the dialog changes, components using the setOpen hook don't need to re-render
  const DialogContextValue = createContext<boolean | undefined>(undefined);
  const DialogContextFunction = createContext<
    React.Dispatch<React.SetStateAction<boolean>> | undefined
  >(undefined);

  function DialogContextProvider({ children }: { children: React.ReactNode }) {
    const [open, setOpen] = useState(false);

    return (
      <DialogContextValue.Provider value={open}>
        <DialogContextFunction.Provider value={setOpen}>{children}</DialogContextFunction.Provider>
      </DialogContextValue.Provider>
    );
  }

  function useDialogOpen(): boolean {
    const open = useContext(DialogContextValue);
    if (open === undefined) {
      throw new NoContextProviderError();
    }
    return open;
  }
  function useDialogSetOpen(): React.Dispatch<React.SetStateAction<boolean>> {
    const setOpen = useContext(DialogContextFunction);
    if (setOpen === undefined) {
      throw new NoContextProviderError();
    }
    return setOpen;
  }

  return {
    DialogContextProvider,
    useDialogOpen,
    useDialogSetOpen,
  };
}

    
// Usage example
    
const {
  DialogContextProvider: AskHelpDialogContextProvider,
  useDialogOpen: useAskHelpDialogOpen,
  useDialogSetOpen: useAskHelpDialogSetOpen,
} = createDialogContext();

export { AskHelpDialogContextProvider, useAskHelpDialogOpen, useAskHelpDialogSetOpen };