react-chained-modals

React chained modals

Allow you to add few chained modals or just single popup in your react app. Easy to use and customizing. Check the demo page

Getting Started

Installation

Get the package from npm

npm i react-chained-modals

Usage

Import:

import ChainedModal from "react-chained-modals";
import "react-chained-modals/src/modal.css"
import "animate.css"

then place:

<ChainedModal
  animationNext="fadeInRight"
  animationPrev="fadeInLeft"
  visible={this.state.showModal}
  onRequestClose={this.toggleModal}
  closeOnBackground
  animationSpeed="faster"
  elements={[
   {
     component: Modal1,
     props: { title: "First modal" }
   },
   {
     component: Modal2,
     props: { title: "Second modal" }
   },
   {
     component: Modal3,
     props: { title: "Third modal" }
   }
 ]}
/>

Methods and options

Name	Type	Description	Default
animationNext	string	Transition animation on showNext method call. View full list here Animate.css. This method will call also on popup first view.	none
animationPrev	string	Transition animation on showPrev method call. View full list here Animate.css	none
visible	bool	Is modals visible. Options: true, false	false
onRequestClose	function	Method that should set visible to false
closeOnBackground	bool	Should popup close on click at background. Options: true, false	false
animationSpeed	string	Define it if you want to change the animation speed. Options: "slow", "slower", "fast", "faster"	none
elements	array	Each item in the array should have the component that will show and optional parameter props which put all 'props' you want to use in this component	none

Methods and options for each modal

In each component, that you added in elements you can get next next properties and methods from props:

Name	Type	Description
closeChainedModal	function	The onRequestClose function will be called
totalModals	number	Number of modals, length of array
showNext	function	Show next modal function
showPrev	function	Show prev modal function
currentModal	number	Current modal, index in array

Example of Modal1 component:

const Modal1 = props => {
  return (
    <div>
      {props.title} {props.currentModal}
      <div>{props.totalModals}</div>
      <div>
        <span onClick={props.showPrev()}>Go prev </span>
        <span onClick={props.showNext()}>Go next</span>
      </div>
      <button onClick={() => props.closeChainedModal()}>close modal</button>
    </div>
  );
};

Customizing:

Just replace your styles with styles from the module

Built With

• Animate.css - Animations for transition between modals
• React portals - Used for display modal
• Classnames - For combining few classNames