react-modal-vz

react-modal-vz

LIVE EXAMPLE

---

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