skills.rest
julianoczkowski
julianoczkowskiCOMMUNITY
Explore all skills by this author →
GitHub

implement-modus-modal-with-refs

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

3|2|Updated Oct 3, 2025
Search Tags:#react#modals#web-components#ui-patterns#dialog#forwardref#useimperativehandle
One-click install
npx skills add https://github.com/julianoczkowski/create-trimble-app --skill implement-modus-modal-with-refs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implement-modus-modal-with-refs
Source: https://github.com/julianoczkowski/create-trimble-app/tree/main/templates/react/.cursor/skills/implement-modus-modal-with-refs
Command: npx skills add https://github.com/julianoczkowski/create-trimble-app --skill implement-modus-modal-with-refs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enable React apps to control Modus modal dialogs from parent components using a stable API, avoiding brittle DOM manipulation and enabling coordinated UI flows.

Core Features & Use Cases

  • ForwardRef pattern to expose openModal and closeModal
  • useImperativeHandle for a consistent, typed API
  • Access to the native dialog via querySelector("dialog")
  • Slot-based content structure (header, content, footer) for flexible composition
  • Suitable for modals that require programmatic triggers, lifecycle control, and testability in React apps

Quick Start

Create a ModusModal with a component ref and call openModal() in response to a user action.

Frequently Asked Questions about implement-modus-modal-with-refs

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

FAQPage Schema
How do I programmatically open and close Modus modals in React?▼

You must configure React forwardRef and useImperativeHandle to expose openModal and closeModal methods, allowing parent components to trigger modal dialogs without direct DOM manipulation.

What is the best way to control Modus modal lifecycle from a parent component?▼

Controlling the Modus modal lifecycle from a parent component is best achieved by attaching an onClose callback with proper cleanup, coordinating UI flows through a stable API rather than brittle DOM manipulation.

How does useImperativeHandle work with Modus web components in React?▼

useImperativeHandle works with Modus web components in React by defining a typed API that targets the native dialog element via querySelector, exposing imperative actions to parent refs.

Can I customize the header and footer of Modus dialogs using slots in React?▼

Yes, you can customize Modus dialogs in React using a slot-based content structure that separates the header, content, and footer, providing flexible composition for programmatic triggers.

How do I access the native dialog element inside a Modus modal component?▼

To access the native dialog element inside a Modus modal component, use querySelector("dialog") within the useImperativeHandle implementation to retrieve the underlying HTML dialog for programmatic control.

Do I need forwardRef to trigger Modus modals from parent logic in React?▼

Yes, you need forwardRef to trigger Modus modals from parent logic in React, as it enables the ref forwarding required to expose useImperativeHandle methods for coordinated UI flows and testability.

Related Skills

Explore More Software Engineering Skills→
julianoczkowskijulianoczkowski
3

set-up-modus-event-listeners

Set up and clean up Modus web component event listeners in React.

Community
Intermediate
chrisbaneschrisbanes
908

compose-state-holder-ui-split

Decouple Compose screen business logic from UI wiring with a state-holder composable.

Community
Intermediate
jiaiyanjiaiyan
8

n-thing

Display structured entity information using a slot-driven layout.

Community
Intermediate
mabdulraufmabdulrauf

modal

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

Community
Intermediate