skills.rest
kingmacth
kingmacthCOMMUNITY
Explore all skills by this author →
GitHub

modal

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

Updated Dec 12, 2024
Search Tags:#ui#frontend#react#i18n#modal#imperative#createModal
One-click install
npx skills add https://github.com/kingmacth/lobe-chat --skill modal-kingmacth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/kingmacth/lobe-chat/tree/main/.agents/skills/modal
Command: npx skills add https://github.com/kingmacth/lobe-chat --skill modal-kingmacth

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Imperfect modal dialogs require boilerplate, state management, and inconsistent dismiss behavior; this skill provides a clear API to create and manage modals imperatively using createModal from @lobehub/ui.

Core Features & Use Cases

  • Create modals imperatively with a single function call
  • Configure features like fullscreen, destroyOnHidden, footer, and width
  • Use a content component with optional modal context and i18n support for dynamic content

Quick Start

Call createModal with your modal content component to display a modal.

Frequently Asked Questions about modal

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

FAQPage Schema
How do I create React modals imperatively without managing state?▼

Imperative modals can be created using the createModal helper, allowing you to open dialogs with a single function call instead of writing manual state management boilerplate.

Can I configure fullscreen and custom footer behavior for modals in React?▼

Modals created with createModal support configuring fullscreen mode, custom footers, width, and destruction behavior to control how content overlays render and dismiss.

How do I handle dynamic content and i18n in imperative modal dialogs?▼

Dynamic modal content is handled by passing a content component with optional modal context hooks and i18n support to the createModal function for rendering translations.

What is the best way to standardize dismiss behavior across React modal dialogs?▼

Standardizing dismiss behavior is achieved by using an imperative modal API like createModal, which provides a consistent interface to manage destruction and overlay closure.

Does createModal work with @lobehub/ui for frontend content overlays?▼

Yes, createModal is a helper from @lobehub/ui designed specifically to enable imperative creation and management of modal dialogs within your frontend React application.

Related Skills

Explore More Software Engineering Skills→
Nick777-PixelNick777-Pixel

modal

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

Community
Advanced
duwenjiduwenji

modal

Creates imperative modals with ModalHost for React/Next.js apps using @lobehub/ui/base-ui and i18next t.

Community
Intermediate
lobehublobehub
81.4k

modal

Create and manage modal dialogs programmatically using createModal from @lobehub/ui.

Official
Intermediate
jiaiyanjiaiyan
8

n-modal

Implement modal dialogs and overlays in Naive UI with useModal.

Community
Intermediate