skills.rest
Chenm4
Chenm4COMMUNITY
Explore all skills by this author →
GitHub

modal

Create and control imperative modals with createModal from @lobehub/ui.

Updated Feb 1, 2026
Search Tags:#React#UI#modal#dialog#imperative#createModal
One-click install
npx skills add https://github.com/Chenm4/VoiceChatAssistant --skill modal-chenm4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/Chenm4/VoiceChatAssistant/tree/main/lobehub-main/.agents/skills/modal
Command: npx skills add https://github.com/Chenm4/VoiceChatAssistant --skill modal-chenm4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Modal dialogs can complicate UI with boilerplate and inconsistent behavior. This Skill demonstrates how to create and control imperative modals using createModal from @lobehub/ui, enabling dynamic dialogs without relying on component state alone.

Core Features & Use Cases

  • Imperative modal creation: spawn and control modals programmatically.
  • Reusable modal factories: define configurable modals reusable across features.
  • Content-driven UX: compose modular content components for flexible dialogs.

Quick Start

Use the createModal helper from @lobehub/ui to instantiate a modal, then trigger it from your feature code (for example, call a generated modal creator on a button click).

Frequently Asked Questions about modal

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I trigger a modal dialog programmatically in React without managing component state?▼

Imperative modals are triggered programmatically by calling a generated modal creator function, bypassing component state management entirely. This approach enables dynamic dialogs spawned directly in response to user actions or workflow events.

What is the difference between declarative and imperative modal dialogs in React?▼

Imperative modal dialogs are instantiated and controlled via function calls, allowing you to spawn them on demand. Declarative modals require UI state variables to toggle visibility, whereas imperative factories generate reusable dialogs triggered programmatically.

Can I configure a React modal to be fullscreen or set a custom width using @lobehub/ui?▼

Yes, creating imperative modals with @lobehub/ui supports configurable options including fullscreen, custom width, destroyOnHidden, and custom footer settings. These options are passed when generating the modal factory.

How do I create a reusable modal factory for content-driven UX in React?▼

A reusable modal factory is created by defining a content component and passing configurable options to createModal. This generates a modal creator function you can invoke repeatedly across different features to compose flexible dialogs.

When should I use an imperative modal over a standard state-driven dialog component?▼

Use an imperative modal when dialogs must be triggered programmatically in response to workflow events or user actions. It eliminates state boilerplate and inconsistent behavior, making it ideal for feature work and component libraries.

Does the imperative modal destroy its content when hidden?▼

Yes, the modal factory accepts a destroyOnHidden configuration option. When enabled, this ensures the modal's content component is destroyed when the dialog is dismissed, freeing up resources and resetting internal state.

Related Skills

Explore More Software Engineering Skills→
Nick777-PixelNick777-Pixel

modal

Create imperative modal dialogs with createModal from @lobehub/ui.

Community
Advanced
find-xposed-magiskfind-xposed-magisk
30

modal

Create and configure modal dialogs programmatically with createModal from @lobehub/ui.

Community
Intermediate
mabdulraufmabdulrauf

modal

Create and manage modal dialogs programmatically with @lobehub/ui.

Community
Intermediate
julianoczkowskijulianoczkowski
3

implement-modus-modal-with-refs

Expose openModal and closeModal methods on React Modus modals via forwardRef.

Community
Advanced