react-modal-e2z/README.md

React hook modal portal. (Lib)

<div align="center">
    <h1>react-modal-e2z</h1>
    <a href="https://github.com/delpikye-v/react-modal">react-modal-e2z</a>
    <br />
    <br />
    <b><a href="https://codesandbox.io/s/t4wfop">LIVE EXAMPLE</a></b>
</div>

---

#### Description

+ Simple modal.
+ Append to portal

---
### Usage

Install the package

```js
npm install --save react-modal-e2z
```

Import the module in the place you want to use:
```js
import "react-modal-e2z/build/styles.css";
import Modal from "react-modal-e2z";

```

#### Snippet
```js
    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 <b>index.d.ts</b>

| 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)
|&nbsp;                |
|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

<br />

#### 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
<br />

##### #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

<b><a href="https://codesandbox.io/u/delpi.k">LIVE EXAMPLE</a>

<br />

### License

MIT