Modal Demo
Deep DiveExamplesGetting StartedInstallationBasic usageDemoOptions that can be passed to openModalProps to be passed to while using component modeIntroduction

Getting Started

Installation

npm i react-stateless-modal

Basic usage

Call the openModal function

Invoke the openModal function to spawn a modal as depicted below:

import React, { Component } from "react";
import { openModal } from "react-stateless-modal";
import "react-stateless-modal/dist/modalStyle.css";
class Example extends Component {
  openModal = () => {
    openModal({
      header: () => (
        /* component or string to render header */
      ),
      body: () => (
        /* component or string to render body */
      ),
      footer: () => (
        /* component or string to render footer */
      ),
      classNames: { overlay: className for overlay, modal: className for the modal, closeIcon: className for close icon},
      closeOnEscape: /* Setting true closes the modal on pressing escape key setting false does the opposite (Optional)*/,
      closeIcon: { src: IconObject, alt: alt text for the icon},
      animation: { name: choose from 'bounce', 'fade-in' and 'zoom' animation, duration: 'animationDuration'},
      containerId: /* Id of the custom container over which you would like the modal to be mounted */,
      modalId: /* specify the id of your choice that the modal will take */
      disableOverlayClick: /* setting true prevents the modal from closing when overlay is clicked */
    });
  };
  render() {
    return <button onClick={this.openModal}>Open Modal</button>;
  }
}

The modal will be mounted for you. The modal has a default animation. Setting a class can help in styling the modal. By default closeOnEscape and disableOverlayClick is set to true and false respectively. Pass additional styles to create a modal that suits your needs.

Mount Modal using component mode

You may additionally choose to spawn a modal by directly mounting the Modal component. You may use all the properties used in the object passed to the openModal function. But this option may prove impractical for implementing nested modals.

close a modal using closeModal method

You may close a modal by using the polymorphic method, closeModal. Calling the close method without arguments will close the current modal. You may also pass modal Ids to close the modals that correspond to those ids.

import { modalClose } from 'react-stateless-modal';

usage

closeModal(id0, id1, id2, ....) // this function call will close all the ids passed to it
closeModal() // This function will close only the current modal.

Demo

A basic modal with all the options provided:

Options that can be passed to openModal

NameTypeDefaultDescription
headfunc / stringnullModal heading
bodyfunc / stringnullModal body
footerfunc / stringnullModal footer
classNames{ overlay: string, modal: string, closeIcon: string }An object that defines classNames for overlay, modal and closeIcon
closeOnEscapebooltrueDefines modal's closing condition on pressing ESCAPE key
closeIcon{ src: string alt: string } Custom close icon that takes icon's path and alt text
animation{ name: string duration: string }{ name: 'fade-in', duration: '500ms' }Defines modal animation
containerIdnumberDefines the if of the containerId where the modal will be mounted
modalIdnumberDefines the modal container
disableOverlayClickboolfalseDefines modal's closing condition on clicking overlay

Props to be passed to while using component mode

You may pass all the options in that can be passed to openModal as props to component mode. Additionally you also need to pass open and onClose props to that control modal's opening.

NameTypeDefaultDescription
openboolControl if the modal is open or not.
onClosefuncCallback fired when the Modal is closed irrespective of the event that led the closing of the modal