Opens a modal dialog and returns a handle to it.
The element or component to render in the dialog. If a component is provided, it will be provided with a dialog prop that contains the dialog handle.
This dialog can be closed by calling the close method on the returned handle, optionally providing a result.
The dialog can also be closed by the user by clicking the backdrop or pressing the escape key.
If the dialog is closed without a result, the result will be undefined.
const dialog = dialogApi.show<boolean>(
<DialogContent>
<DialogTitle>Are you sure?</DialogTitle>
<DialogActions>
<Button onClick={() => dialog.close(true)}>Yes</Button>
<Button onClick={() => dialog.close(false)}>No</Button>
</DialogActions>
</DialogContent>
);
const result = await dialog.result();
function CustomDialog({ dialog }: { dialog: DialogApiDialog<boolean | undefined> }) {
return (
<DialogContent>
<DialogTitle>Are you sure?</DialogTitle>
<DialogActions>
<Button onClick={() => dialog.close(true)}>Yes</Button>
<Button onClick={() => dialog.close(false)}>No</Button>
</DialogActions>
</DialogContent>
)
}
const result = await dialogApi.show(CustomDialog).result();
Opens a modal dialog and returns a handle to it.
The element or component to render in the dialog. If a component is provided, it will be provided with a dialog prop that contains the dialog handle.
This dialog can not be closed in any other way than calling the close method on the returned handle and providing a result.
const dialog = dialogApi.showModal<boolean>(
<DialogContent>
<DialogTitle>Are you sure?</DialogTitle>
<DialogActions>
<Button onClick={() => dialog.close(true)}>Yes</Button>
<Button onClick={() => dialog.close(false)}>No</Button>
</DialogActions>
</DialogContent>
);
const result = await dialog.result();
function CustomDialog({ dialog }: { dialog: DialogApiDialog<boolean> }) {
return (
<DialogContent>
<DialogTitle>Are you sure?</DialogTitle>
<DialogActions>
<Button onClick={() => dialog.close(true)}>Yes</Button>
<Button onClick={() => dialog.close(false)}>No</Button>
</DialogActions>
</DialogContent>
)
}
const result = await dialogApi.showModal(CustomDialog).result();
A Utility API for showing dialogs that render in the React tree and return a result.