Installation
Basic
Alert Modal
Respect Screen
By default, modal will show as Drawer/Sheet on small screen. You can disable this behavior by setting respectScreen
to false
.
Controlled
Sizes
The modal is set to lg
by default. You can adjust it to any size from the available options.
Sticky
You can use the Modal.Body
component to make the body of the modal sticky.
Nested
Show Notch
If you want to show the notch for modal which only appears on small screen pass the notch
prop.
Drawer Mode
If you want to show the modal as a drawer, pass the drawer
prop. It will be displayed as drawer even on large screen.
Drawer Side
If you want to show the modal on the left, right or top side, use Sheet.
Triggered By Menu
It might be a good idea to extract the modal into a separate component for better organization.
This action works both for Modal
and Sheet
component.
Look at these example
interface ModalActionProps {
state: string
onOpenChange: (state: string) => void
actionType: { description: string; action: () => void; confirmText: string; title: string }
disabled: boolean
}
const ModalAction = (props: ModalActionProps) => (
<Modal.Content isOpen={props.state !== ''} onOpenChange={props.onOpenChange}>
<Modal.Header>
<Modal.Title>{props.actionType?.title}</Modal.Title>
<Modal.Description>{props.actionType?.description}</Modal.Description>
</Modal.Header>
<Modal.Footer>
<Button slot='close' variant='outline'>
Cancel
</Button>
<Button
variant={props.state === 'restore' ? 'primary' : 'danger'}
isDisabled={loading}
isPending={loading}
onPress={actions(state)?.action}
>
{actions(state)?.confirmText}
</Button>
</Modal.Footer>
</Modal.Content>
)
Then you can use it like this.
<ModalAction
state={state}
onOpenChange={closeModal}
actionType={actionType(state)}
disabled={loading}
/>
With that, now we can modify the actionType
function to return the initial state.
const actionType = (t: string) => {
const initialsState = {
title: '',
description: '',
confirmText: '',
action: () => {}
}
switch (t) {
case 'delete': ...
case 'ban': ...
case 'restore': ...
default:
return initialsState
}
}