modal

SKILL.md

Imperative modal dialog creation using createModal from @lobehub/ui.

Eliminates the need for open state management by calling a function directly instead of rendering a declarative component

Provides useModalContext hook within modal content to access close() and setCanDismissByClickOutside() methods

Supports configuration for fullscreen mode, footer content, width, and destroy-on-hidden behavior

Requires separate i18n handling: useTranslation hook in content components, direct i18next.t() import for createModal parameters

Modal Imperative API Guide

Recommended: @lobehub/ui/base-ui

New code should use the base-ui modal stack (headless primitives, not antd Modal):

createModal, confirmModal, ModalHost from @lobehub/ui/base-ui

useModalContext from @lobehub/ui/base-ui inside modal content

Body slot: pass content (or children; runtime uses content ?? children).

Global ModalHost (required)

Base-ui createModal renders through a separate host from the root package. The app must mount ModalHost from @lobehub/ui/base-ui once near the root (e.g. next to other global hosts). Without it, createModal calls will not appear.

If the project only mounts ModalHost from @lobehub/ui, add a second lazy ModalHost from @lobehub/ui/base-ui until all imperative modals are migrated.

Why imperative?