MUST use when creating, editing, or writing modal dialogs or imperative modals. Prefer createModal / useModalContext / confirmModal from @lobehub/ui/base-ui; root @lobehub/ui is legacy (antd Modal). Covers patterns, ModalHost, and migration notes.
@lobehub/ui/base-uiNew code should use the base-ui modal stack (headless primitives, not antd Modal):
createModal, confirmModal, ModalHost from @lobehub/ui/base-uiuseModalContext from @lobehub/ui/base-ui inside modal contentBody slot: pass content (or children; runtime uses content ?? children).
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, calls will not appear.
createModalIf the project only mounts ModalHost from @lobehub/ui, add a second lazy ModalHost from @lobehub/ui/base-ui until all imperative modals are migrated.
| Mode | Characteristics | Recommended |
|---|---|---|
| Declarative | open state + <Modal /> | ❌ |
| Imperative | Call createModal(), no local state | ✅ |
features/
└── MyFeatureModal/
├── index.tsx # export createXxxModal
└── MyFeatureContent.tsx # modal body
MyFeatureContent.tsx)'use client';
import { useModalContext } from '@lobehub/ui/base-ui';
import { useTranslation } from 'react-i18next';
export const MyFeatureContent = () => {
const { t } = useTranslation('namespace');
const { close } = useModalContext();
return <div>{/* ... */}</div>;
};
createModal (index.tsx)'use client';
import { createModal } from '@lobehub/ui/base-ui';
import { t } from 'i18next';
import { MyFeatureContent } from './MyFeatureContent';
export const createMyFeatureModal = () =>
createModal({
content: <MyFeatureContent />,
footer: null,
maskClosable: true,
styles: {
content: { overflow: 'hidden', padding: 0 },
},
title: t('myFeature.title', { ns: 'setting' }),
width: 'min(80%, 800px)',
});
import { createMyFeatureModal } from '@/features/MyFeatureModal';
const handleOpen = useCallback(() => {
createMyFeatureModal();
}, []);
return <Button onClick={handleOpen}>Open</Button>;
useTranslation in components.createModal options: import { t } from 'i18next' where hooks are unavailable.useModalContextconst { close, setCanDismissByClickOutside } = useModalContext();
ImperativeModalProps builds on BaseModalProps: title, width, maskClosable, open, onOpenChange, footer, styles / classNames (keys: backdrop, popup, header, title, close, content, …).
| Property | Notes |
|---|---|
content | Main body (preferred name vs children) |
maskClosable | Click outside to dismiss |
styles.* | Semantic regions, not antd styles.body |
import { confirmModal } from '@lobehub/ui/base-ui';
confirmModal({
title: '…',
content: '…',
okText: '…',
cancelText: '…',
onOk: async () => {},
});
@lobehub/ui (root)Older call sites use createModal from @lobehub/ui, which is typed as antd Modal props (children, allowFullscreen, getContainer, destroyOnHidden, styles.body, etc.). Prefer migrating new work to @lobehub/ui/base-ui.
Examples (legacy): src/features/SkillStore/index.tsx, src/features/LibraryModal/CreateNew/index.tsx.
ModalHost is mounted.src/features/SkillStore/index.tsx, src/features/LibraryModal/CreateNew/index.tsx