Popularity
5.4
Growing
Activity
0.0
-
752
12
79
Monthly Downloads: 0
Programming language: CSS
License: MIT License
Latest version: v1.8.1
rodal alternatives and similar libraries
Based on the "Overlay" category.
Alternatively, view rodal alternatives based on common mentions on social networks and blogs.
-
react-aria-modal
A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. -
sweetalert2-react-content
Official SweetAlert2 enhancer adding support for React elements as content
Get performance insights in less than 4 minutes
Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
Sponsored
scoutapm.com
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of rodal or a related project?
README
Rodal

A React modal with animations.
Example
Installation
npm i rodal --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 |
Animation Types
- zoom
- fade
- flip
- door
- rotate
- slideUp
- slideDown
- slideLeft
- slideRight