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