ReddRadar
Agent skill
modal
Modal imperative API guide. Use when creating modal dialogs using createModal from @lobehub/ui. Triggers on modal component implementation or dialog creation tasks.
Install this agent skill to your Project
npx add-skill https://github.com/lobehub/lobehub/tree/canary/.agents/skills/modal
SKILL.md
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:
useTranslationhook (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.tsxsrc/features/LibraryModal/CreateNew/index.tsx
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
lobehub/lobehub
task
lobehub/lobehub
i18n
Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.
lobehub/lobehub
data-fetching
Data fetching architecture guide using Service layer + Zustand Store + SWR. Use when implementing data fetching, creating services, working with store hooks, or migrating from useEffect. Triggers on data loading, API calls, service creation, or store data fetching tasks.
lobehub/lobehub
recent-data
Guide for using Recent Data (topics, resources, pages). Use when working with recently accessed items, implementing recent lists, or accessing session store recent data. Triggers on recent data usage or implementation tasks.
lobehub/lobehub
hotkey
Guide for adding keyboard shortcuts. Use when implementing new hotkeys, registering shortcuts, or working with keyboard interactions. Triggers on hotkey implementation or keyboard shortcut tasks.
lobehub/lobehub
debug
Debug package usage guide. Use when adding debug logging, understanding log namespaces, or implementing debugging features. Triggers on debug logging requests or logging implementation.
Didn't find tool you were looking for?