문서보기더 알아보기오버레이 열기

오버레이 열기

간단한 오버레이 열기

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>정말로 계속하시겠어요?</DialogTitle>
              <DialogActions>
                <Button onClick={close}>아니요</Button>
                <Button onClick={close}>네</Button>
              </DialogActions>
            </Dialog>
          );
        });
      }}
    >
      Confirm Dialog 열기
    </Button>
  );
}

export const Example = () => {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
};
Open on CodeSandboxOpen Sandbox

비동기 오버레이 열기

overlay.openAsync를 사용하면 오버레이의 결과를 Promise로 처리할 수 있어요.


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>정말로 계속하시겠어요?</DialogTitle>
                <DialogActions>
                  <Button onClick={() => close(false)}>아니요</Button>
                  <Button onClick={() => close(true)}>네</Button>
                </DialogActions>
              </Dialog>
            );
          });

          setResult(result);
        }}
      >
        Confirm Dialog 열기
      </Button>
      <p>result: {result ? 'Y' : 'N'}</p>
    </div>
  );
}

export const Example = () => {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
};
Open on CodeSandboxOpen Sandbox

오버레이 메모리 해제하기

unmount를 사용하면 오버레이를 메모리에서 완전히 제거할 수 있어요.

하지만 닫기 애니메이션이 있는 경우, unmount를 바로 호출하면 애니메이션이 보이지 않을 수 있어요. 이럴 때는 close를 호출한 후, 애니메이션이 완료된 뒤 unmount를 실행하세요.

onExit prop 사용하기

오버레이가 닫히는 애니메이션이 종료되었다는 onExit prop을 구현하면 애니메이션이 끝난 직후 오버레이를 제거할 수 있어요.


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} />;
          });
        }}
      >
        Confirm Dialog 열기
      </Button>
    </>
  );
}

export const Example = () => {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
};
Open on CodeSandboxOpen Sandbox

setTimeout 사용하기

onExit prop이 없다면, setTimeout을 사용해서 애니메이션이 종료된 후에 오버레이를 제거할 수 있어요. 애니메이션 지속 시간에 맞춰 적절한 시간을 설정하세요.

다음 코드에서 close 함수는 오버레이를 닫고, setTimeout을 사용해 600ms 후에 unmount 함수를 호출해요.


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();
                  // `unmount`는 600ms 이후에 실행돼요.
                  // 애니메이션 재생 시간에 맞춰서 적절하게 타이밍을 조정하세요.
                  setTimeout(unmount, 600);
                }}
              />
            );
          });
        }}
      >
        Confirm Dialog 열기
      </Button>
    </>
  );
}

export const Example = () => {
  return (
    <OverlayProvider>
      <App />
    </OverlayProvider>
  );
};
Open on CodeSandboxOpen Sandbox
FAQReact 외부에서 오버레이 열기