Awesome

Rodal

A React modal with animations.
Example

Installation

# React 17 or 18
npm i rodal --save

# React 15 or 16, install rodal v1
npm i rodal@1 --save

Usage

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

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }

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

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

  render() {
    return (
      <div>
        <button onClick={this.show.bind(this)}>show</button>

        <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>
          <div>Content</div>
        </Rodal>
      </div>
    );
  }
}

Props

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
id	string	/	id for dialog

Animation Types

zoom
fade
flip
door
rotate
slideUp
slideDown
slideLeft
slideRight

Other

Vue version