Popularity
5.7
Growing
Activity
0.0
-
885
17
87
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.
-
sweetalert2
✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦 -
react-aria-modal
A fully accessible React modal built according WAI-ARIA Authoring Practices -
sweetalert2-react-content
Official SweetAlert2 enhancer adding support for React elements as content -
modali
A delightful modal dialog component for React, built from the ground up to support React Hooks.
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)
Promo
klo.dev
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of rodal or a related project?
README
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 [email protected] --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