react-modal-e2z v2.0.0-np

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

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