react-modal-e2z

react-modal-e2z

LIVE EXAMPLE

---

Description

• Simple modal.
• Append to portal

---

Usage

Install the package

npm install --save react-modal-e2z

Import the module in the place you want to use:

import "react-modal-e2z/build/styles.css";
import Modal from "react-modal-e2z";

Snippet

    const [isShow, setShow] = React.useState(false);

    <Modal isOpen={isShow} center handleOpen={setShow}>
        This is modal
    </Modal>

    <Modal
        // backdropDark
        // disabledClose
        // center
        lockBodyScroll
        escapeClose={false}
        outSideClose={false}
        handleCancel={() => {
          if (window.confirm("Are you sure?")) {
              // ver >= 1.5.0: if you customize handleCancel => you need
              setShow(false);
          }
        }}
        // center
        toggleTitleExpand
        modalTitle="Title"
        isOpen={isShow}
        handleOpen={setShow}

        // from react-animate-z
        // >= ver: 2.0.0-np
        animationProps={{
            type: "popIn", // default
            {/* duration */}
            {/* timing */}
            {/* delay */}
        }}
    >
        {[...Array(20)].map((item, index) => {
            return <div key={index}>index {index}</div>;
        })}
    </Modal>

---

props

see index.d.ts

props	type	description
id?	string
modalId?	string
isOpen?	boolean
center?	boolean (false)
className?	string
showHeader?	boolean (true)
showFooter?	boolean
modalTitle?	string
modalHeader?	ReactNode
modalFooter?	ReactNode
customizeXClose?	string / React.ReactNode;
alignFooter?:	"right" / "center" / "left"
fullButtonMobile?:	boolean;
showExtraButton?	boolean (false)
showAcceptButton?	boolean (true)
showCancelButton?	boolean (true)
showXClose?	boolean (true)
disabledClose?	boolean (false)
escapeClose?	boolean (true)
outSideClose?	boolean (true)
toggleTitleExpand?	boolean (false) (dbClickEvent)
fullSceen?	boolean (false)
classNameAccept?	string
classNameCancel?	string
classNameExtra?	string
labelAccept?	string ("OK")
labelCancel?	string ("CANCEL")
labelExtra?	string ("EXTRA")
handleToggle?	Function // fullSceen or default
handleAccept?	Function
handleCancel?	Function
handleXClose?	Function // default like handleCancel
handleExtra?	Function // when showExtraButton = true
handleOpen?	Function // => handle show modal

Note

• class for button action: modal2-danger-button, modal2-light-button, modal2-primary-button, modal2-secondary-button
• disabledClose => no apply escapse, no display cancel and xclose.
• escapeClose => make sure you don't use 3rd library to close by escapse.
• some case: set position: relative; for body

#ver: 1.5.0-np:

• update toggle: + fit height when lockBodyScroll (true) + double click mobile view
• update handle handleCancel, handleEscapse (no auto close modal)

ver: 2.0.0-np:

• optimze and animate

RUN

LIVE EXAMPLE

License

MIT