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