# react-chained-modals

> You can create one popup or few chained modals using this plugin

Latest version **1.0.10** (published 2018-12-09) · 0 weekly downloads

## Install

```sh
npm install react-chained-modals
pnpm add react-chained-modals
yarn add react-chained-modals
bun add react-chained-modals
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2018-12-09 |
| First published | 2018-12-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 109.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aleksey Modin |
| Maintainers | amodin |
| Keywords | React, modal, popup, chained modals |

## Links

- npm: https://www.npmjs.com/package/react-chained-modals
- Homepage: https://github.com/AModin/react-chained-modals
- npm.io page: https://npm.io/package/react-chained-modals

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) 2.2.6
- [animate.css](https://npm.io/package/animate.css.md) latest

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.10 (latest) — 2018-12-09
- 1.0.8 — 2018-12-09
- 1.0.7 — 2018-12-09
- 1.0.6 — 2018-12-09
- 1.0.5 — 2018-12-08
- 1.0.4 — 2018-12-08
- 1.0.3 — 2018-12-08
- 1.0.2 — 2018-12-08
- 1.0.1 — 2018-12-08
- 1.0.0 — 2018-12-08
- 0.0.1 — 2018-12-06

## README

# React chained modals [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=React%20chained%20modals%20&url=https://github.com/AModin/react-chained-modals&hashtags=react,modal,animate.css,portals)
![React version](https://img.shields.io/badge/react-v16.2.0-%2361dafb.svg)

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/)

![screencast-amodin github io-2018 12 09-21-00-37](https://user-images.githubusercontent.com/15379788/49700916-308eed80-fbf6-11e8-8139-5465910de808.gif)

## 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
<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](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 (
    <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](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

---
_Source: https://npm.io/package/react-chained-modals · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._