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>
          {[...Array(10)].map((item, index) => {
            return <div key={index}>index {index}</div>;
          })}
        </Modal> */}
    </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"
fullButtonhMobile?:	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

RUN

LIVE EXAMPLE

License

MIT