@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
  isOpen={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" isOpen={open} onClose={close}>
  <p>Drawer content</p>
</ModalStyled>

<ModalStyled variant="drawer-bottom" title="Options" isOpen={open} onClose={close}>
  <p>Bottom sheet content</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>
)}