https://github.com/amodin/react-chained-modals
React component for display few chained modals / Single modal / Prompts / Alerts / Dialogs etc.
https://github.com/amodin/react-chained-modals
alerts animation chained chained-modals classname dialogs javascript modals popup popup-window prompts react
Last synced: about 2 months ago
JSON representation
React component for display few chained modals / Single modal / Prompts / Alerts / Dialogs etc.
- Host: GitHub
- URL: https://github.com/amodin/react-chained-modals
- Owner: AModin
- Created: 2018-12-08T14:39:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-09T18:10:09.000Z (almost 7 years ago)
- Last Synced: 2025-08-02T06:34:48.245Z (2 months ago)
- Topics: alerts, animation, chained, chained-modals, classname, dialogs, javascript, modals, popup, popup-window, prompts, react
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React chained modals [](https://twitter.com/intent/tweet?text=React%20chained%20modals%20&url=https://github.com/AModin/react-chained-modals&hashtags=react,modal,animate.css,portals)
Allow you to add few chained modals or just single popup in your react app. Easy to use and customizing. [Check the demo page](https://amodin.github.io/react-chained-modals-demo/)
## Getting Started
### Installation
Get the package from npm
```
npm i react-chained-modals
```
### Usage
Import:
```javascript
import ChainedModal from "react-chained-modals";
import "react-chained-modals/src/modal.css"
import "animate.css"
```
then place:
```html
```
### Methods and options
| Name | Type | Description | Default|
| ------------- |:-------------:| ----------| ------- |
| animationNext | string | Transition animation on `showNext` method call. View full list here [Animate.css](https://daneden.github.io/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](https://daneden.github.io/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:
```html
const Modal1 = props => {
return (
{props.title} {props.currentModal}
{props.totalModals}
Go prev
Go next
props.closeChainedModal()}>close modal
);
};
```
### Customizing:
Just replace your styles with styles from the module
## Built With
* [Animate.css](https://daneden.github.io/animate.css/ ) - Animations for transition between modals
* [React portals](https://reactjs.org/docs/portals.html) - Used for display modal
* [Classnames](https://github.com/JedWatson/classnames) - For combining few classNames