DocumentationLearn MoreOpening Overlays

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 function Example() {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
}
Open on CodeSandboxOpen Sandbox

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 function Example() {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
}
Open on CodeSandboxOpen Sandbox

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 function Example() {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
}
Open on CodeSandboxOpen Sandbox

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 function Example() {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
}
Open on CodeSandboxOpen Sandbox
TestingOpening Overlays Outside React