Opening Overlays
Opening Simple Overlays
You can easily open and close overlays using overlay.open.
import { OverlayProvider, overlay } from 'overlay-kit'; import Button from '@mui/material/Button'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; function App() { return ( <Button onClick={() => { overlay.open(({ isOpen, close }) => { return ( <Dialog open={isOpen} onClose={close}> <DialogTitle>Are you sure you want to continue?</DialogTitle> <DialogActions> <Button onClick={close}>No</Button> <Button onClick={close}>Yes</Button> </DialogActions> </Dialog> ); }); }} > Open Confirm Dialog </Button> ); } export const Example = () => { return ( <OverlayProvider> <App /> </OverlayProvider> ); };
Opening Asynchronous Overlays
You can handle overlay results as a Promise using overlay.openAsync.
import { useState } from 'react'; import { OverlayProvider, overlay } from 'overlay-kit'; import Button from '@mui/material/Button'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; function App() { const [result, setResult] = useState<boolean>(); return ( <div> <Button onClick={async () => { const result = await overlay.openAsync<boolean>(({ isOpen, close }) => { return ( <Dialog open={isOpen} onClose={() => close(false)}> <DialogTitle>Are you sure you want to continue?</DialogTitle> <DialogActions> <Button onClick={() => close(false)}>No</Button> <Button onClick={() => close(true)}>Yes</Button> </DialogActions> </Dialog> ); }); setResult(result); }} > Open Confirm Dialog </Button> <p>result: {result ? 'Y' : 'N'}</p> </div> ); } export const Example = () => { return ( <OverlayProvider> <App /> </OverlayProvider> ); };
Releasing Overlay Memory
You can completely remove overlays from memory using unmount.
However, if there’s a closing animation, calling unmount immediately might prevent the animation from showing.
In this case, call close first, then execute unmount after the animation completes.
Using the onExit prop
By implementing the onExit prop that indicates the closing animation has finished, you can remove the overlay immediately after the animation ends.
import { OverlayProvider, overlay } from 'overlay-kit'; import Button from '@mui/material/Button'; import { ConfirmDialog } from './confirm-dialog'; function App() { return ( <> <Button onClick={() => { overlay.open(({ isOpen, close, unmount }) => { return <ConfirmDialog isOpen={isOpen} close={close} onExit={unmount} />; }); }} > Open Confirm Dialog </Button> </> ); } export const Example = () => { return ( <OverlayProvider> <App /> </OverlayProvider> ); };
Using setTimeout
If there’s no onExit prop, you can use setTimeout to remove the overlay after the animation ends.
Set an appropriate time according to the animation duration.
In the following code, the close function closes the overlay and uses setTimeout to call the unmount function after 600ms.
import { OverlayProvider, overlay } from 'overlay-kit'; import Button from '@mui/material/Button'; import { ConfirmDialog } from './confirm-dialog'; function App() { return ( <> <Button onClick={() => { overlay.open(({ isOpen, close, unmount }) => { return ( <ConfirmDialog isOpen={isOpen} close={() => { close(); setTimeout(unmount, 600); }} /> ); }); }} > Open Confirm Dialog </Button> </> ); } export const Example = () => { return ( <OverlayProvider> <App /> </OverlayProvider> ); };