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

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