@mshafiqyajid/react-modal

npm install @mshafiqyajid/react-modal

import { ModalStyled } from "@mshafiqyajid/react-modal/styled";
import "@mshafiqyajid/react-modal/styles.css";

const [open, setOpen] = useState(false);

<button onClick={() => setOpen(true)}>Open</button>

<ModalStyled
  open={open}
  onClose={() => setOpen(false)}
  title="Confirm action"
  footer={
    <>
      <button onClick={() => setOpen(false)}>Cancel</button>
      <button onClick={() => setOpen(false)}>Confirm</button>
    </>
  }
>
  <p>Are you sure you want to proceed?</p>
</ModalStyled>

<ModalStyled variant="drawer-right" title="Settings" open={open} onClose={close}>
  <p>Drawer content</p>
</ModalStyled>

<ModalStyled variant="drawer-bottom" title="Options" open={open} onClose={close}>
  <p>Bottom sheet (swipe-to-dismiss enabled automatically)</p>
</ModalStyled>

<ModalStyled
  open={open}
  onClose={close}
  title="Delete item"
  confirmVariant="confirm"
  confirmLabel="Delete"
  confirmTone="danger"
  onConfirm={() => { deleteItem(); close(); }}
  onCancel={close}
>
  <p>This action cannot be undone.</p>
</ModalStyled>

<ModalStyled open={open} onClose={close} title="Options" mobileVariant="sheet">
  <p>Drag down to dismiss on mobile.</p>
</ModalStyled>

<ModalStyled open={open} onClose={close} transition="zoom">...</ModalStyled>
<ModalStyled open={open} onClose={close} transition="slide-up">...</ModalStyled>

<ModalStyled
  open={open}
  onClose={close}
  preventClose={async (reason) => {
    if (reason === "overlay") return true; // block overlay click
    const dirty = await checkUnsavedChanges();
    return dirty; // true = cancel the close
  }}
>
  <p>Form with unsaved changes</p>
</ModalStyled>

import { useModal } from "@mshafiqyajid/react-modal";

const { isOpen, open, close, modalProps, overlayProps } = useModal();

<button onClick={open}>Open</button>

{isOpen && (
  <div {...overlayProps}>
    <div {...modalProps} role="dialog" aria-modal="true">
      <button onClick={close}>Close</button>
      Content
    </div>
  </div>
)}