Modal Imperative API Guide

Use createModal from @lobehub/ui for imperative modal dialogs.

Why Imperative?

Mode Characteristics Recommended

Declarative Need open state, render <Modal />

❌

Imperative Call function directly, no state ✅

File Structure

features/ └── MyFeatureModal/ ├── index.tsx # Export createXxxModal └── MyFeatureContent.tsx # Modal content

Implementation

1. Content Component (MyFeatureContent.tsx )

'use client';

import { useModalContext } from '@lobehub/ui'; import { useTranslation } from 'react-i18next';

export const MyFeatureContent = () => { const { t } = useTranslation('namespace'); const { close } = useModalContext(); // Optional: get close method

return <div>{/* Modal content */}</div>; };

2. Export createModal (index.tsx )

'use client';

import { createModal } from '@lobehub/ui'; import { t } from 'i18next'; // Note: use i18next, not react-i18next

import { MyFeatureContent } from './MyFeatureContent';

export const createMyFeatureModal = () => createModal({ allowFullscreen: true, children: <MyFeatureContent />, destroyOnHidden: false, footer: null, styles: { body: { overflow: 'hidden', padding: 0 } }, title: t('myFeature.title', { ns: 'setting' }), width: 'min(80%, 800px)', });

3. Usage

import { createMyFeatureModal } from '@/features/MyFeatureModal';

const handleOpen = useCallback(() => { createMyFeatureModal(); }, []);

return <Button onClick={handleOpen}>Open</Button>;

i18n Handling

• Content component: useTranslation hook (React context)

• createModal params: import { t } from 'i18next' (non-hook, imperative)

useModalContext Hook

const { close, setCanDismissByClickOutside } = useModalContext();

Common Config

Property Type Description

allowFullscreen

boolean

Allow fullscreen mode

destroyOnHidden

boolean

Destroy content on close

footer

ReactNode | null

Footer content

width

string | number

Modal width

Examples

• src/features/SkillStore/index.tsx

• src/features/LibraryModal/CreateNew/index.tsx