1.1.0-vz • Published 1 year ago
react-modal-vz v1.1.0-vz
Description
- Simple/Quick show the modal
- Single/Multiple the modal.
- Append to portal
- Remade: react-modal-e2z
Preview
Usage
Install the package
npm install --save react-modal-vz
Import the module in the place you want to use:
import "react-modal-vz/build/styles.css";
import Modal, { ModalBusUtils } from "react-modal-vz";
// Add modal to top AppFile
Snippet
option 1
const [isShow, setShow] = React.useState(false);
<Modal isOpen={isShow} center handleOpen={setShow}>
This is modal
</Modal>
option 2
// 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
// 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 index.d.ts
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; |
Animation
AnimateType =
| 'slideInFromLeft'
| 'slideInFromRight'
| 'slideInFromTop'
| 'slideInFromBottom'
| 'fadeIn'
| 'fadeInFromLeft'
| 'fadeInFromRight'
| 'fadeInFromTop'
| 'fadeInFromBottom'
| 'bounce'
| 'popIn'
| 'default' => // use default
BusModal
// 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
RUN
LIVE EXAMPLE
License
MIT