Skip to content
A React modal with animations.
CSS JavaScript
Branch: master
Clone or download
Latest commit b09df41 Dec 9, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs release 1.6.3 Dec 9, 2017
lib Fixing a Display Issue Dec 7, 2017
src Fixing a Display Issue Dec 9, 2017
.babelrc release 1.5.3 Jul 6, 2017
.gitignore update dependencies Jul 6, 2017
.npmignore release 1.5.4 Jul 6, 2017
.travis.yml add: .travis.yml Apr 27, 2016
LICENSE upd: add LICENSE Jan 18, 2017 fix Example URL Dec 7, 2017
package.json release 1.6.3 Dec 9, 2017
webpack.config.js update github pages dir Oct 24, 2017

Rodal Build Status Dependency Status NPM downloads

A React modal with animations.


React 15/16

npm i rodal --save

React 0.14

npm i rodal@1.2.10 --save


import React from 'react';
import Rodal from 'rodal';

// include styles
import 'rodal/lib/rodal.css';

class App extends React.Component {

    constructor(props) {
        this.state = { visible: false };

    show() {
        this.setState({ visible: true });

    hide() {
        this.setState({ visible: false });

    render() {
        return (
                <button onClick={}>show</button>

                <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>


Property Type Default Description
width number 400 width of dialog
height number 240 height of dialog
measure string px measure of width and height
onClose func / handler called onClose of modal
onAnimationEnd func / handler called onEnd of animation
visible bool false whether to show dialog
showMask bool true whether to show mask
closeOnEsc bool false whether close dialog when esc pressed
closeMaskOnClick bool true whether close dialog when mask clicked
showCloseButton bool true whether to show close button
animation string zoom animation type
enterAnimation string / enter animation type (higher order than 'animation')
leaveAnimation string leave animation type (higher order than 'animation')
duration number 300 animation duration
className string / className for the container
customStyles object / custom styles
customMaskStyles object / custom mask styles

Animation Types

  • zoom
  • fade
  • flip
  • door
  • rotate
  • slideUp
  • slideDown
  • slideLeft
  • slideRight


Vue version

You can’t perform that action at this time.