modal

Name: modal
Availability: InStock
Author: find-xposed-magisk

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

30|10|Updated Aug 5, 2024

Search Tags:#typescript #ui #api #react #modal #imperative #lobehub

Ready to run

npx skills add https://github.com/find-xposed-magisk/lobe-chat --skill modal-find-xposed-magisk

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: modal
Source: https://github.com/find-xposed-magisk/lobe-chat/tree/main/.agents/skills/modal
Command: npx skills add https://github.com/find-xposed-magisk/lobe-chat --skill modal-find-xposed-magisk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill documents how to implement modal dialogs using an imperative API, enabling developers to create and control modal UI programmatically with createModal from @lobehub/ui.

Core Features & Use Cases

Imperative modal creation with createModal for flexible dialog flows without managing local open state.
Configure modal options such as fullscreen, destroyOnHidden, footer, and width, and compose content with a dedicated content component.
Use cases include feature-specific settings, confirmations, and dynamic content modals across React apps.

Quick Start

Open a sample feature modal by calling a generated createMyFeatureModal function and render it from 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 create modal dialogs in React without managing local open state?▼

You can create modal dialogs programmatically using an imperative API. The createModal function from @lobehub/ui allows you to open, configure, and manage modal flows without declaring local open state variables.

What configuration options are available for React modal dialogs?▼

Modal dialogs support configuration options such as fullscreen, destroyOnHidden, footer, and width. You compose the dialog content using a dedicated content component and an optional useModalContext hook to manage lifecycle and styling.

When should I use an imperative API for modal dialogs instead of declarative state?▼

Use an imperative API for modal dialogs when handling feature-specific settings, confirmations, or dynamic content. This approach streamlines complex dialog flows by triggering modals programmatically rather than passing state down through components.

Does the imperative modal API work with TypeScript and React projects?▼

Yes, the imperative modal API is designed for React-based UI projects and includes TypeScript support. You use the createModal API from @lobehub/ui alongside a modal content component to render dialogs.

How do I render dynamic content inside a modal dialog?▼

To render dynamic content, you compose a dedicated modal content component and pass it to the generated createMyFeatureModal function. You can trigger this function from events like a button click to open the dialog.

Can I control the lifecycle and styling of a modal dialog after it opens?▼

Yes, you can control modal lifecycle and styling using the optional useModalContext hook. This hook allows you to manage the modal's behavior after it has been programmatically opened.