JumboDialog

JumboDialog provides a global, imperative dialog system. Instead of placing MUI <Dialog> components directly on pages, you call showDialog() from anywhere in the component tree and JumboDialog renders the modal centrally.

Import

typescript
import { JumboDialog, JumboDialogProvider } from '@jumbo/components';
import { useJumboDialog } from '@jumbo/components/JumboDialog';

Setup

JumboDialogProvider and JumboDialog are already wired into App.tsx. No additional setup is needed for most use cases:

tsx
// src/App.tsx
import { JumboDialog, JumboDialogProvider } from '@jumbo/components';
 
function App() {
  return (
    <JumboDialogProvider>
      <JumboDialog />
      {/* rest of the app */}
    </JumboDialogProvider>
  );
}

JumboDialogProvider

Props

PropTypeRequiredDescription
childrenReactNodeYesApplication subtree

JumboDialog

Renders the active dialog. Place it once at the top of your component tree, outside of any conditionally rendered subtrees.

Props

JumboDialog accepts no props — it reads dialog state from JumboDialogProvider.

useJumboDialog hook

Call showDialog() to open a dialog and hideDialog() to close it imperatively from any component:

typescript
const { showDialog, hideDialog } = useJumboDialog();

showDialog(config)

typescript
showDialog({
  title: string | ReactNode;        // Dialog title
  content: ReactNode;               // Dialog body
  actions?: ReactNode;              // Dialog action buttons
  onClose?: () => void;             // Called when the dialog is closed
  maxWidth?: MUI DialogProps['maxWidth']; // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  fullWidth?: boolean;
})

hideDialog()

Closes the currently open dialog and calls the onClose callback if provided.

Examples

Confirmation dialog

tsx
import { useJumboDialog } from '@jumbo/components/JumboDialog';
import { Button } from '@mui/material';
 
export function DeleteButton({ onConfirm }: { onConfirm: () => void }) {
  const { showDialog, hideDialog } = useJumboDialog();
 
  const handleClick = () => {
    showDialog({
      title: 'Confirm deletion',
      content: 'This action cannot be undone. Delete this item?',
      actions: (
        <>
          <Button onClick={hideDialog}>Cancel</Button>
          <Button
            color='error'
            onClick={() => { hideDialog(); onConfirm(); }}
          >
            Delete
          </Button>
        </>
      ),
    });
  };
 
  return (
    <Button color='error' onClick={handleClick}>
      Delete
    </Button>
  );
}

Form in a dialog

tsx
showDialog({
  title: 'Add team member',
  content: <AddMemberForm onSuccess={hideDialog} />,
  maxWidth: 'sm',
  fullWidth: true,
});