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

React Remodal isa a simple, customizable modal for react applications.

Modal_Popup React

Documentation

React Remodal npm version

Demo & Example

See the demo

Features

  • Animated
  • Customizable
  • Responsive

Installation

npm install react-remodal --save

Usage

import createRemodal from 'react-remodal' import 'react-remodal/styles/main.css'  // options to createRemodal are optional, see 'Customization' section. const Remodal = createRemodal()  class Example extends Component {   state = {     isModalOpen: false   }    toggleModal () {     this.setState({       isModalOpen: !this.state.isModalOpen     })   }    render () {     return (       <div>         <button onClick={::this.toggleModal}>           Open modal         </button>         <Remodal isOpen={this.state.isModalOpen} onClose={::this.toggleModal}>           <h1>             Lorem ipsum dolor sit amet.           </h1>           <p>             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut             enim ad minim veniam, quis nostrud exercitation ullamco laboris             nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor             in reprehenderit in voluptate velit esse cillum dolore eu fugiat             nulla pariatur. Excepteur sint occaecat cupidatat non proident,             sunt in culpa qui officia deserunt mollit anim id est laborum.           </p>         </Remodal>       </div>     )   } }

Customization

React remodal animates the dialog and overlay with css classes. You can pass custom classes to createRemodal. See below:

const Remodal = createRemodal({    // these are the default values:   classes: {     'dialog': 'react-remodal__dialog',     'dialogEnter': 'react-remodal__dialog--enter',     'dialogEnterActive': 'react-remodal__dialog--enter-active',     'dialogLeave': 'react-remodal__dialog--leave',     'dialogLeaveActive': 'react-remodal__dialog--leave-active',     'overlay': 'react-remodal__overlay',     'overlayEnter': 'react-remodal__overlay--enter',     'overlayEnterActive': 'react-remodal__overlay--enter-active',     'overlayLeave': 'react-remodal__overlay--leave',     'overlayLeaveActive': 'react-remodal__overlay--leave-active',     'wrap': 'react-remodal__wrap',     'wrapIsOpen': 'react-remodal__wrap--is-open'   },    // transition durations: should match the transition duration of your   // css classes.   //   // these are the default values:   transitions: {     dialogEnterTimeout: 300,     dialogLeaveTimeout: 300,     overlayEnterTimeout: 300,     overlayLeaveTimeout: 300   } })

Props

  • isOpen - (bool) if the modal is open (default = false)
  • onClose - (function) callback on close
  • overlayClosesModal - (bool) if clicking on the overlay closes the modal (requires onClose)
  • closeOnEscape - (bool) if keyboard escape closes the modal (requires onClose)

Recommendations

It is recommended to add overflow-y: scroll; to your body css, this way we prevent "jumpy" content.

body {   overflow-y: scroll; }

Development

npm start

You May Also Like