Modals manager
Installation
Package depends on @mantine/core
and @mantine/hooks
.
Install with yarn:
Install with npm:
Setup ModalsProvider
Wrap your app with ModalsProvider
component:
Confirm modal
@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 programmaticallychildren
– additional modal content displayed before actionsonCancel
– called when cancel button is clickedonConfirm
– called when confirm button is clickedcloseOnConfirm
– should modal be closed when confirm button is clicked, defaults totrue
closeOnCancel
– should modal be closed when cancel button is clicked, defaults totrue
cancelProps
– cancel button propsconfirmProps
– confirm button propsgroupProps
– buttons Group propslabels
– 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 labels
on ModalsProvider
:
Context modals
You can define any amount of modals in ModalsProvider context:
And then open one of these modals with openContextModal
function.
openContextModal
function accepts 2 arguments: modal key (should match one defined on ModalsProvider) and modal props:
Content modals
With openModal
function you can open a modal with any content:
Multiple opened modals
You can open multiple layers of modals. Every opened modal is added as first element in modals queue.
To close all opened modals call modals.closeAll()
function:
ModalsProvider component props
Name | Type | Description |
---|---|---|
children * | ReactNode | Your app |
labels | ConfirmLabels | Confirm modal labels |
modalProps | ModalSettings | Shared Modal component props, applied for every modal |
modals | Record<string, FC<ContextModalProps<any>>> | Predefined modals |