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