Rodal  

A React modal with animations.
Example

Installation

``bash


React 17 or 18

`javascript
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 (


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