react-modal-vz
Version:
React modal, show quick modal
207 lines (174 loc) • 10 kB
Markdown
<div align="center">
<h1>react-modal-vz</h1>
<a href="https://github.com/delpikye-v/react-modal">react-modal-vz</a>
<br />
<br />
<b><a href="https://codesandbox.io/s/t4wfop">LIVE EXAMPLE</a></b>
</div>
---
#### Description
+ Simple/Quick show the modal
+ Single/Multiple the modal.
+ Append to portal
+ Remade: <a href="https://www.npmjs.com/package/react-modal-e2z">react-modal-e2z</a>
#### Preview
---
### Usage
Install the package
```js
npm install --save react-modal-vz
```
Import the module in the place you want to use:
```js
import "react-modal-vz/build/styles.css";
import Modal, { ModalBusUtils } from "react-modal-vz";
// Add modal to top AppFile
```
#### Snippet
##### option 1
```js
const [isShow, setShow] = React.useState(false);
<Modal isOpen={isShow} center handleOpen={setShow}>
This is modal
</Modal>
```
##### option 2
```js
// App.ts[js]
<Modal>
This is modal
</Modal>
// sub file
<button onClick={() => ModalBusUtils.showModal()}>
Show Modal
</button>
<button onClick={() => ModalBusUtils.hideModal()}>
Hide Modal
</button>
<button
onClick={() => {
ModalBusUtils.showModalWithProps({
...ModalProps, // props modal
});
}};
>
Show with props
</button>
```
##### option multi modal
```js
// You must set the modalId, otherwise it will always show this
// App.ts[js]
<Modal
modalId="modal-one"
>
This is modal
</Modal>
<Modal
modalId="modal-two"
>
This is modal 2
</Modal>
// sub file
<button
onClick={() => {
ModalBusUtils.showModaIdlWithProps('modal-two', {
handleAccept: () => alert('abcd'),
} as IModalProps);
}}
>
Show Modal2
</button>
<button onClick={() => ModalBusUtils.hideModalId('modal-two')}>
Hide Modal2
</button>
```
------------
#### ModalProps
see <b>index.d.ts</b>
| props | type | description |
|------------------------------|---------------------------------------|----------------------------------------------------------------------------|
| id?: string; | `string` | |
| modalId?: string; | `string` | `Support multi modal` |
| isOpen?: boolean; | `boolean` | |
| center?: boolean; | `boolean` | `false` |
| bottom?: boolean; | `boolean` | `false` |
| className?: string; | `string` | |
| fitHeight?: boolean; | `boolean` | |
| tabIndex?: number; | `number` | |
| animationType?: | `AnimateType` | `default` |
| animationDuration?: | `string` | `1200ms` |
| showHeader?: boolean; | `boolean` | `true` |
| showFooter?: boolean; | `boolean` | `true` |
| modalTitle?: | `string / React.ReactNode` | |
| modalHeader?: | `string / React.ReactNode` | |
| modalFooter?: | `string / React.ReactNode` | |
| customizeXClose?: | `string / React.ReactNode` | |
| alignFooter?: | `center / right / left` | `right` |
| fullButtonMobile?: | `boolean` | `true` |
| showExtraButton?: | `boolean` | `false` |
| showAcceptButton?: | `boolean` | `true` |
| showCancelButton?: | `boolean` | `true` |
| showXClose?: | `boolean` | `true` |
| disabledClose?: | `boolean` | `false` |
| escapeClose?: | `boolean` | `true` |
| lockBodyScroll?: | `boolean` | `true` |
| closeOnBackdrop?: | `boolean` | `false` |
| showSplitBorder?: | `boolean` | `true` |
| toggleTitle?: | `boolean` | `false` |
| fullSceen?: | `boolean` | `false` |
| | | |
| classNameAccept?: | `string` | |
| classNameCancel?: | `string` | |
| classNameExtra?: | `string` | |
| labelAccept?: | `string` | |
| labelCancel?: | `string` | |
| labelExtra?: | `string` | |
| backdropDark?: | `boolean` | `false` |
| handleToggle?: | `(toggle?: boolean) => any;` | |
| handleAccept?: | `() => any;` | |
| handleCancel?: | `() => any;` | |
| handleEscapse?: | `() => any;` | |
| handleXClose?: | `() => any;` | |
| handleExtra?: | `() => any;` | |
| handleOpen?: | `(isOpen: boolean) => any;` | |
<br />
#### Animation
```js
AnimateType =
| 'slideInFromLeft'
| 'slideInFromRight'
| 'slideInFromTop'
| 'slideInFromBottom'
| 'fadeIn'
| 'fadeInFromLeft'
| 'fadeInFromRight'
| 'fadeInFromTop'
| 'fadeInFromBottom'
| 'bounce'
| 'popIn'
| 'default' => // use default
```
#### BusModal
```js
// single modal
ModalBusUtils.showModal();
ModalBusUtils.hideModal();
ModalBusUtils.showModalWithProps(ModalProps);
// multi modal
ModalBusUtils.showModalId(modalId);
ModalBusUtils.hideModalId(modalId);
ModalBusUtils.showModaIdlWithProps(modalId, ModalProps);
```
#### 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 />
#### RUN
<b><a href="https://codesandbox.io/u/delpi.k">LIVE EXAMPLE</a>
<br />
### License
MIT