react-awesome-modal

Information

This Package is deprecated.: It's consist of legacy stacks.; So I created a new modal package with react-hooks and raect-portal.; Please check it.; https://github.com/shibe97/react-hooks-use-modal

Demo

Now, there are four effects. I'll add to them gradually.

Usage

First, download by npm.

                            
$ npm i -S react-awesome-modal

In your react application, import(require) and use.
ES6 style is as below.

                            
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>
        );
    }
}

Refer to the following for the attributes.

Attribute	Required	Type	description	example
visible	required	Boolean	to show or hide the dialog	-
effect	option	String	to set how to pop-up	fadeInUp, fadeInDown, etc...
width	option	Number	to set modal width (the default is 'px'. '%' can be also used.)	500, 500px, 80%
height	option	Number	to set modal height (the default is 'px'. '%' can be also used.)	400, 400px, 40%
onClickAway	option	Function	to set actions when the user click the mask	-