Wrap your app with
@mantine/modals package includes special modal that can be used for confirmations.
Component includes confirm and cancel buttons and supports children to display additional
information about action. Use
openConfirmModal function to open a confirm modal:
openConfirmModal function accepts one argument with following properties:
modalId– modal id, defaults to random id, can be used to close modal programmatically
children– additional modal content displayed before actions
onCancel– called when cancel button is clicked
onConfirm– called when confirm button is clicked
closeOnConfirm– should modal be closed when confirm button is clicked, defaults to
closeOnCancel– should modal be closed when cancel button is clicked, defaults to
cancelProps– cancel button props
confirmProps– confirm button props
groupProps– buttons Group props
labels– cancel and confirm buttons labels, can be defined on ModalsProvider
Using this properties you can customize confirm modal to match current context requirements:
To setup shared labels for confirm modals set
You can define any amount of modals in ModalsProvider context:
And then open one of these modals with
modals.openContextModal function accepts 2 arguments: modal key (should match one defined on ModalsProvider) and modal props:
modal are not typesafe. You can add typesafety with a Typescript module declaration.
Typesafe context modals will force you to use the correct types for
modals.open function you can open a modal with any content:
You can open multiple layers of modals. Every opened modal is added as first element in modals queue.
To close all opened modals call
Note that when using the Modals manager, dynamic content is not supported. Once modal is opened, a snapshot is saved into internal state and cannot be updated.
If you intend to have dynamic content in modals, either:
- Use internal component state, or
- Use the modal component instead of modals manager