Feature request: system similar to that of notifications, but for a modal

[justinsmid]

I'd like to have a way to programatically show a modal, similarly to how the notifications system works.

Specifically, my use case is showing a confirmation modal whenever a user tries to delete an item. I'd like to be able to call something like

modal.showPrompt({
    title: "Confirm deletion",
    text: "Are you sure you want to delete this item?",
    onConfirm: () => delete(item),
    onCancel: () => {}
});

Or perhaps more generally

modal.showModal({
    title: "Confirm deletion",
    text: "Are you sure you want to delete this item?",
    actions: (
        <Group>
            <Button onClick={() => delete(item)}>
                Yes
            </Button>
        </Group>
    )
})

Without explicitly having to render a Modal with all of the content and keep track of its state, etc.

[Xapu1337]

Good idea imo

[rtivital]

I was thinking about this feature and I think we will work on this, but not in such form. My idea was that you create a set of Modal components like this:

const components = {
  login: <LoginForm />,
  confirm: <Cornfirm />,
  // ...other modals
};

And then show them with a hook:

const modal = useModal('login');
modal.show({ title: 'Login', onClose: console.log });

[justinsmid]

That would definitely work as well! Do you currently have any idea when we could expect this?

[rtivital]

I'm not sure yet, in one of the next 3.x releases, most likely this year

[rtivital]

Modals package was added as a part of 3.2 release – https://mantine.dev/others/modals/
@justinsmid does it fit all of your requirements?

[justinsmid]

Definitely. Looks great, thanks!