Centralized modals manager with option to handle state of multi-step modals
Wrap your app with ModalsProvider component:
The @mantine/modals package includes a special modal that can be used for confirmations. The component includes confirm and cancel buttons and supports children to display additional information about the action. Use the openConfirmModal function to open a confirm modal:
openConfirmModal function accepts one argument with the following properties:
Using these properties, you can customize the confirm modal to match current context requirements:
To set up shared labels for confirm modals, set labels on ModalsProvider :
You can define any number of modals in the ModalsProvider context:
And then open one of these modals with the modals.openContextModal function. The modals.openContextModal function accepts 2 arguments: modal key (should match one defined on ModalsProvider) and modal props:
By default, innerProps and modal are not typesafe. You can add type safety with a TypeScript module declaration.
Type-safe context modals will force you to use the correct types for openContextModal :
With the modals.open function, you can open a modal with any content:
You can open multiple layers of modals. Every opened modal is added as the first element in the modals queue. To close all opened modals, call the modals.closeAll() function:
You can pass props down to the Modal component by adding them to the argument of every modals.x function. Example of setting the radius , size , and withCloseButton props:
The modals manager allows you to dynamically update the content and properties of both standard and context modals after they are opened.
To update regular modals, use the modals.updateModal function:
Context modals can also be updated dynamically using modals.updateContextModal :