Modal Component

Question

Opens/closes with backdrop, ESC to close.

Accepted Answer

import './index.css'; import React, { useState, useEffect } from 'react'; function Modal({ open, onClose, children }) { useEffect(() => { function onKeyDown(e) { if (e.key === 'Escape') onClose(); } if (open) window.addEventListener('keydown', onKeyDown); return () => window.removeEventListener('keydown', onKeyDown); }, [open, onClose]); if (!open) return null; return (

e.stopPropagation()}> {children}

); } function App() { const [open, setOpen] = useState(false); return (

Modal Demo

setOpen(false)}>

This is a modal dialog.

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background: #f5f5f5; } * { box-sizing: border-box; } .modal-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; } .modal-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .modal-open-btn { padding: 0.7rem 1.5rem; font-size: 1.1rem; font-weight: 600; border: none; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; transition: background 0.2s; } .modal-open-btn:hover { background: #1d4ed8; } .modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: #fff; border-radius: 12px; padding: 32px 24px; min-width: 300px; box-shadow: 0 4px 32px rgba(0,0,0,0.18); position: relative; text-align: center; } .modal-close-btn { margin-top: 16px; padding: 0.5rem 1.2rem; background: #ef4444; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .modal-close-btn:hover { background: #b91c1c; }