Skip to content
TanStackIntent
TanStack Intent/Registry/wcz-layout

wcz-layout

dialogs

75 linesSource

Use for acknowledgement alerts, confirmation prompts, or custom MUI Dialogs opened through useDialogs.

Rules

  • Use useDialogs() instead of mounting another provider. It returns { alert, confirm, open, close }.
  • Use confirm() for destructive or user-confirmed actions.
  • Use alert() for informational or error messages that require acknowledgement.
  • Use open() for feature-specific custom dialogs with typed payloads.
  • Custom dialogs receive DialogProps<TPayload, TResult>. open() resolves with whatever the dialog passes to onClose(result), so a dialog that answers a question declares its result type and the caller awaits it. Leave TResult off only for dialogs that return nothing.
  • Use close(dialog, result) only to close outside the dialog component, passing the promise returned by open(). Custom dialogs normally call their injected onClose(result).
  • Colocate feature-specific dialogs in routes/<feature>s/-components; put dialogs used by more than one route in src/components.

Examples

tsx
// confirmation dialog
const { confirm } = useDialogs();
const { t } = useTranslation();

const confirmed = await confirm(t("DeleteConfirmation", { count: selectedIds.length }));
if (confirmed) await deleteFeatures({ data: selectedIds });
tsx
// alert dialog
const { alert } = useDialogs();
const { t } = useTranslation();

try {
  await saveFeature(values);
} catch (error) {
  await alert(error instanceof Error ? error.message : t("UnknownError"));
}
tsx
// custom dialog that returns a result
const { open } = useDialogs();

const saved = await open(EditFeatureDialog, { id });
if (saved) await features.utils.refetch({ throwOnError: true });
tsx
// custom dialog component
interface Payload {
  id: string;
}

export const EditFeatureDialog = ({ payload, open, onClose }: DialogProps<Payload, boolean>) => {
  const { t } = useTranslation();

  return (
    <Dialog fullWidth open={open} onClose={() => onClose(false)}>
      <DialogTitle>{t("EditFeature")}</DialogTitle>
      <DialogContent>{payload.id}</DialogContent>
      <DialogActions>
        <Button onClick={() => onClose(false)}>{t("Cancel")}</Button>
        <Button onClick={() => onClose(true)}>{t("Save")}</Button>
      </DialogActions>
    </Dialog>
  );
};