Modals manager
Installation
Package depends on @asuikit/core
and @asuikit/hooks
.
Install with yarn:
Install with npm:
Setup ModalsProvider
Wrap your app with ModalsProvider
component:
Confirm modal
@asuikit/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 modals.openContextModal
function.
modals.openContextModal
function accepts 2 arguments: modal key (should match one defined on ModalsProvider) and modal props:
Typesafe context modals
By default innerProps
and 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 openContextModal
:
Content modals
With modals.open
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:
Dynamic Content and the modals manager
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
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 |