Back to Details

modal

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Modal Imperative API Guide

Modal命令式API指南

Use 
createModal
from 
@lobehub/ui
for imperative modal dialogs.
使用
@lobehub/ui
中的
createModal
实现命令式模态对话框。

Why Imperative?

为什么选择命令式？

ModeCharacteristicsRecommended
DeclarativeNeed 
open
state, render 
<Modal />
❌
ImperativeCall function directly, no state✅
模式特点推荐度
声明式需要
open
状态，渲染
<Modal />
组件		❌
命令式直接调用函数，无需状态✅

File Structure

文件结构

features/
└── MyFeatureModal/
    ├── index.tsx           # Export createXxxModal
    └── MyFeatureContent.tsx # Modal content
features/
└── MyFeatureModal/
    ├── index.tsx           # 导出createXxxModal
    └── MyFeatureContent.tsx # 模态框内容组件

Implementation

实现步骤

1. Content Component (
MyFeatureContent.tsx
)

1. 内容组件（
MyFeatureContent.tsx
）

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>;
};
tsx
'use client';

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

export const MyFeatureContent = () => {
  const { t } = useTranslation('namespace');
  const { close } = useModalContext(); // 可选：获取关闭方法

  return <div>{/* 模态框内容 */}</div>;
};

2. Export createModal (
index.tsx
)

2. 导出createModal（
index.tsx
）

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)',
  });
tsx
'use client';

import { createModal } from '@lobehub/ui';
import { t } from 'i18next'; // 注意：使用i18next，而非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

3. 使用方式

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

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

return <Button onClick={handleOpen}>Open</Button>;
tsx
import { createMyFeatureModal } from '@/features/MyFeatureModal';

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

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

i18n Handling

国际化（i18n）处理

  • Content component: 
    useTranslation
    hook (React context)
  • createModal params: 
    import { t } from 'i18next'
    (non-hook, imperative)
  • 内容组件：使用
    useTranslation
    钩子（React上下文）
  • createModal参数：使用
    import { t } from 'i18next'
    （非钩子，命令式方式）

useModalContext Hook

useModalContext钩子

tsx
const { close, setCanDismissByClickOutside } = useModalContext();
tsx
const { close, setCanDismissByClickOutside } = useModalContext();

Common Config

常用配置项

PropertyTypeDescription
allowFullscreen
boolean
Allow fullscreen mode
destroyOnHidden
boolean
Destroy content on close
footer
ReactNode | null
Footer content
width
string | number
Modal width
属性类型描述
allowFullscreen
boolean
是否允许全屏模式
destroyOnHidden
boolean
关闭时是否销毁内容
footer
ReactNode | null
底部内容
width
string | number
模态框宽度

Examples

示例参考

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