modal

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

1|Updated Apr 14, 2026
One-click install
npx skills add https://github.com/andershi666/lobehub-hr-demo --skill modal-andershi666
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/andershi666/lobehub-hr-demo/tree/main/lobehub/.agents/skills/modal
Command: npx skills add https://github.com/andershi666/lobehub-hr-demo --skill modal-andershi666

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Opening and managing modal dialogs in UI often require scattered imperative logic. This skill provides a clear guide for using createModal from @lobehub/ui to encapsulate modal behavior in a reusable, imperative workflow.

Core Features & Use Cases

  • Imperative modal creation with createModal for programmatic control.
  • Content composition via dedicated content components and useModalContext for lifecycle handling.
  • Internationalization and configuration options (title, fullscreen, destroyOnHidden, width) to fit diverse UI requirements.

Quick Start

Open a feature button that invokes createMyFeatureModal to display the modal.

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?

Triggering a modal dialog programmatically in React is done by encapsulating behavior with createModal from @lobehub/ui, allowing you to invoke modals imperatively in response to user actions or component lifecycles.

What is the best way to manage modal state outside of component render trees?

Managing modal state outside render trees is achieved by using an imperative workflow with createModal, which centralizes scattered logic into a reusable function like createMyFeatureModal for programmatic control.

How do I configure fullscreen and width options for imperative modal dialogs?

Configuring fullscreen and width for imperative modal dialogs is handled by passing configurable options to createModal, allowing customization of title, fullscreen mode, destroyOnHidden, and width dimensions.

Can I use useModalContext for modal lifecycle handling and i18n?

Using useModalContext for modal lifecycle handling and i18n is fully supported, enabling dedicated content components to integrate internationalization and manage context within the modal workflow.

Does creating imperative modals require manual state management hooks?

Creating imperative modals does not require manual state management hooks because createModal abstracts the scattered imperative logic, providing a clear encapsulated workflow for programmatic dialog control.