How to open component in a new window on button click? - reactjs

Question

I am new to react.
I am working on a project where I have to show a whiteboard and draw on it.
I want to open the whiteboard when a menu is clicked and on that window I will draw.
How can I do that?
Here is my code:
This is my component for showing menu.
Menu.tsx
export default function Menu(props: { buttonClassName?: string }) {
const [showWindowPortal, setWindowPortal] = useState(false);
const anchorRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
window.addEventListener('beforeunload', () => {
setWindowPortal(false);
});
});
return (
<>
<Button onClick={() => setMenuOpen(isOpen => !isOpen)} ref={anchorRef} className=
{props.buttonClassName}>
{isMobile ? (
<MoreIcon />
) : (
<>
<span style={{ color: '#fff' }}>Settings</span>
<span style={{ color: '#fff', paddingTop: '7px' }}>
<ExpandMoreIcon />
</span>
</>
)}
</Button>
<MenuContainer
open={menuOpen}
onClose={() => setMenuOpen(isOpen => !isOpen)}
anchorEl={anchorRef.current}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: isMobile ? -55 : 'bottom',
horizontal: 'center',
}}
>
<MenuItem
onClick={() => {
setWindowPortal(true);
}}
>
<Typography variant="body1">Whiteboard</Typography>
</MenuItem>
</MenuContainer>
{showWindowPortal &&(
<Container
open={showWindowPortal}
onClose={() => {
setSettingsOpen(false);
setMenuOpen(false);
}}
></Container>
)}
</>
);
}
I want to show below component in a new window when I click the menu.
Container.tsx
function Container({ open, onClose }: { open: boolean; onClose: () => void},props:any) {
const classes = useStyles();
const [color, setColor] = useState('#000000');
const [size, setSize] = useState(5);
const [domReady, setDomReady] = useState(false);
let containerEl:any ;
let externalWindow:any ;
useEffect(() => {
externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
containerEl = externalWindow.document.createElement('div');
externalWindow.document.body.appendChild(containerEl);
externalWindow.document.title = 'A React portal window';
setDomReady(true);
externalWindow.addEventListener('beforeunload', () => {
//props.closeWindowPortal();
});
return ()=>{
externalWindow.close();
}
});
function changeColor(e: any) {
setColor(e.target.value);
}
function changeSize(e: any) {
setSize(e.target.value);
}
if (!containerEl) {
return null;
}
return domReady? createPortal(<div className="container">Hello</div>
,containerEl):null;
--------I want to show the below to the new window ---------------------
return (
<Dialog open={open} onClose={onClose} classes={{ paper: classes.container }}>
<div className="container">
<div className="tools-section">
<div className="color-picker-container">
Select Brush Color :
<input type="color" value={color} onChange={changeColor} />
</div>
<div className="brushsize-container">
Select Brush Size :
<select value={size} onChange={changeSize}>
<option> 5 </option>
<option> 10 </option>
<option> 15 </option>
<option> 20 </option>
<option> 25 </option>
<option> 30 </option>
</select>
</div>
</div>
<div className="board-container">
<Board color={color} size={size}></Board>
</div>
</div>
</Dialog>
);
}
export default Container;