How would you design a modal manager system in React?

🧩 Scenario

You need a global modal manager so any component in the app can open a modal without manually placing modal components everywhere.

Requirements:

• Open any modal from anywhere (context API)
• Support multiple modal types (alert, confirm, custom forms)
• Stack modals (open one over another)
• ESC to close
• Click outside to close
• Focus trap inside modal
• Render via portal to avoid z-index issues

🧠 Answer (Design Overview)

Architecture

1. Modal Context + Provider — exposes openModal(), closeModal(), modals[].
2. Portal Rendering — render modals at document.body.
3. Stacking Support — treat modals as a stack.
4. Focus Management — trap focus inside the modal, restore focus to opener.
5. Escape + Backdrop Close — keyboard + click handling.
6. Dynamic Modal Content — render any component passed into openModal().

Tradeoffs:

• A global manager centralizes behavior but requires careful typing (if using TypeScript).
• Stacked modals complicate focus management.

🎮 Live Demo: Modal Manager System

🔍 Real-World Tips

• Use focus trapping libraries like focus-trap for robust accessibility.
• Use framer-motion for modal enter/exit animations.
• For complex UIs, allow passing modal-specific props to dynamically generated modals.
• Maintain a modal registry for different modal types (e.g., AlertModal, ConfirmModal, FormModal).

Quick Practice

1. Add focus trapping using tab key cycling.
2. Add an animation for open/close.
3. Add modal types with standardized layouts.
4. Persist the last opened modal if the user reloads.

Summary

• A modal manager centralizes modal behavior.
• Use context + portal + modal stack.
• Add focus, ESC, and backdrop handling.
• Scale by registering different modal types.