react-awesome-modal

![Build Status](https://travis-ci.org/shibe97/react-awesome-modal)

This is a Customizable Modal.

http://shibe97.github.io/react-awesome-modal/

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 (
            

                React-Modal Examples

                 this.openModal()} />
                 this.closeModal()}>
                    
                        Title

                        Some Contents

                         this.closeModal()}>Close
                    

                
            

        );
    }
}


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

$3


$ npm install

$3


$ npm run build

$3


$ npm run watch

$3


$ npm test

$3


$ npm run docs

License

MIT

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 (

React-Modal Examples

this.openModal()} />
this.closeModal()}>

Title

Some Contents

this.closeModal()}>Close

);
}
}

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

$3

$ npm install

$3

$ npm run build

$3

$ npm run watch

$3

$ npm test

$3

$ npm run docs