react-awesome-modal

WebJar for react-awesome-modal

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-awesome-modal
Last Version	1.0.0
Release Date	Mar 16, 2016
Type	jar
Description	react-awesome-modal WebJar for react-awesome-modal
Project URL	http://webjars.org

Download react-awesome-modal

Filename	Size
react-awesome-modal-1.0.0.pom
react-awesome-modal-1.0.0.jar	138 KB
react-awesome-modal-1.0.0-sources.jar	22 bytes
react-awesome-modal-1.0.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-awesome-modal/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-awesome-modal</artifactId>
    <version>1.0.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-awesome-modal/
implementation 'org.webjars.npm:react-awesome-modal:1.0.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-awesome-modal/
implementation ("org.webjars.npm:react-awesome-modal:1.0.0")

Apache Buildr

'org.webjars.npm:react-awesome-modal:jar:1.0.0'

Apache Ivy

<dependency org="org.webjars.npm" name="react-awesome-modal" rev="1.0.0">
  <artifact name="react-awesome-modal" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-awesome-modal', version='1.0.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-awesome-modal" % "1.0.0"

Leiningen

[org.webjars.npm/react-awesome-modal "1.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Deprecated

This repository is deprecated. But I created a new modal package which uses react hooks. It's easier and more intuitive. Prease look at the new repository.

https://github.com/shibe97/react-hooks-use-modal

react-awesome-modal

This is a Customizable Modal.

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

Usage

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

Versions

Version
1.0.0 Mar 16, 2016