Popularity
5.7
Stable
Activity
4.2
-
910
18
87
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.
-
sweetalert2
✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦 -
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.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
Promo
surveyjs.io
* 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 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