Modal
Pop up a dialog box, demanding attention like a traffic stop sign, ideal for critical interactions.

Installation

In the terminal, run the following command to begin:
npx hq-kit add modal

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
  }
}