Modal.jsx
1014 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { useEffect } from 'react'
const Modal = ({ isOpen, onClose, children, title }) => {
useEffect(() => {
const handleEscape = (e) => {
if (e.key === 'Escape') {
onClose()
}
}
if (isOpen) {
document.addEventListener('keydown', handleEscape)
document.body.style.overflow = 'hidden'
}
return () => {
document.removeEventListener('keydown', handleEscape)
document.body.style.overflow = 'unset'
}
}, [isOpen, onClose])
if (!isOpen) return null
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
{title && (
<div className="modal-header">
<h2>{title}</h2>
<button onClick={onClose} className="modal-close">
×
</button>
</div>
)}
<div className="modal-body">
{children}
</div>
</div>
</div>
)
}
export default Modal