# react-awesome-modal

> This is a React Modal Component.

Latest version **2.0.5** (published 2018-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-awesome-modal
pnpm add react-awesome-modal
yarn add react-awesome-modal
bun add react-awesome-modal
```

## 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 | 2.0.5 |
| Published | 2018-08-31 |
| First published | 2015-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 93 |
| Author | shibe97 |
| Maintainers | shibe97 |
| Keywords | react, component, modal, react-component |

## Links

- npm: https://www.npmjs.com/package/react-awesome-modal
- Repository: https://github.com/shibe97/react-awesome-modal
- Issues: https://github.com/shibe97/react-awesome-modal/issues
- npm.io page: https://npm.io/package/react-awesome-modal

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

- 2.0.5 (latest) — 2018-08-31
- 2.0.4 — 2018-08-15
- 2.0.3 — 2017-11-30
- 2.0.2 — 2017-11-30
- 2.0.1 — 2016-12-16
- 2.0.0 — 2016-12-13
- 1.1.0 — 2016-11-21
- 1.0.2 — 2016-08-12
- 1.0.1 — 2016-08-12
- 0.3.3 — 2016-05-02
- 0.3.2 — 2016-04-18
- 0.3.1 — 2016-04-08
- 0.3.0 — 2016-04-08
- 0.2.8 — 2015-10-08
- 0.2.7 — 2015-10-07
- … 14 more at https://npm.io/package/react-awesome-modal/versions

## README

# react-awesome-modal
[![Build Status](https://travis-ci.org/shibe97/react-awesome-modal.svg?branch=master)](https://travis-ci.org/shibe97/react-awesome-modal)

This is a Customizable Modal.

[http://shibe97.github.io/react-awesome-modal/](http://shibe97.github.io/react-awesome-modal/)

![demo](./assets/images/demo.gif)

## Usage
```javascript
import React, { Component } from 'react';
import Modal from 'react-awesome-modal';

export default class Examples extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible : false
        }
    }

    openModal() {
        this.setState({
            visible : true
        });
    }

    closeModal() {
        this.setState({
            visible : false
        });
    }

    render() {
        return (
            <section>
                <h1>React-Modal Examples</h1>
                <input type="button" value="Open" onClick={() => this.openModal()} />
                <Modal visible={this.state.visible} width="400" height="300" effect="fadeInUp" onClickAway={() => this.closeModal()}>
                    <div>
                        <h1>Title</h1>
                        <p>Some Contents</p>
                        <a href="javascript:void(0);" onClick={() => this.closeModal()}>Close</a>
                    </div>
                </Modal>
            </section>
        );
    }
}
```

## Props
| Attribute   | Required | Type     | description                                 | example                      |
|:------------|:---------|:---------|:--------------------------------------------|:-----------------------------|
| visible     | required | Boolean  | to show or hide the dialog                  | false                        |
| effect      | option   | String   | to set how to pop-up                        | fadeInUp, fadeInDown, etc... |
| width       | option   | String   | to set modal width (px or %)                | 500, 500px, 80%              |
| height      | option   | String   | to set modal height (px or %)               | 400, 400px, 50%              |
| onClickAway | option   | Function | to set actions when the user click the mask | -                            |

## Effect
- fadeInDown [default]
- fadeInUp
- fadeInLeft
- fadeInRight

## How To Develop
### Setup
```
$ npm install
```

### Build
```
$ npm run build
```

### Watch and auto build
```
$ npm run watch
```

### Test
```
$ npm test
```

### Docs
```
$ npm run docs
```

## License
MIT

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