Allow you to add few chained modals or just single popup in your react app. Easy to use and customizing. Check the demo page
Get the package from npm
npm i react-chained-modals
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" }
}
]}
/>
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 |
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 |
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>
);
};
Just replace your styles with styles from the module
- Animate.css - Animations for transition between modals
- React portals - Used for display modal
- Classnames - For combining few classNames