🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An awesome, customizable, animated modal component for React.js.

Modal_Popup React

Documentation

react-awesome-modal

Build Status

This is a Customizable Modal.

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

demo

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


You May Also Like