37 lines
846 B
TypeScript
37 lines
846 B
TypeScript
|
import "./Modal.css";
|
||
|
|
|
||
|
|
import React, { useEffect, useState } from "react";
|
||
|
|
import { createPortal } from "react-dom";
|
||
|
|
|
||
|
|
export function Modal(props: {
|
||
|
|
children: React.ReactNode;
|
||
|
|
maxWidth?: number;
|
||
|
|
onCloseRequest(): void;
|
||
|
|
}) {
|
||
|
|
const modalRoot = useBodyRoot();
|
||
|
|
return createPortal(
|
||
|
|
<div className="Modal">
|
||
|
|
<div className="Modal__background" onClick={props.onCloseRequest}></div>
|
||
|
|
<div className="Modal__content" style={{ maxWidth: props.maxWidth }}>
|
||
|
|
{props.children}
|
||
|
|
</div>
|
||
|
|
</div>,
|
||
|
|
modalRoot
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function useBodyRoot() {
|
||
|
|
function createDiv() {
|
||
|
|
const div = document.createElement("div");
|
||
|
|
document.body.appendChild(div);
|
||
|
|
return div;
|
||
|
|
}
|
||
|
|
const [div] = useState(createDiv);
|
||
|
|
useEffect(() => {
|
||
|
|
return () => {
|
||
|
|
document.body.removeChild(div);
|
||
|
|
};
|
||
|
|
}, [div]);
|
||
|
|
return div;
|
||
|
|
}
|