chenjiahan / Rodal
Licence: mit
A React modal with animations.
Stars: ✭ 754
Projects that are alternatives of or similar to Rodal
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (-1.33%)
Mutual labels: dialog, modal
bootstrap-modal-wrapper
Bootstrap modal factory that supports dynamic modal creations and nested stacked modal features.
Stars: ✭ 18 (-97.61%)
Mutual labels: modal, dialog
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (-66.05%)
Mutual labels: dialog, modal
Sweet Modal Vue
The sweetest library to happen to modals.
Stars: ✭ 682 (-9.55%)
Mutual labels: dialog, modal
jquery.dialog.js
A lightweight replacement for the browser's default dialog boxes.
Stars: ✭ 17 (-97.75%)
Mutual labels: modal, dialog
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (-39.26%)
Mutual labels: dialog, modal
Sweetalert
A beautiful replacement for JavaScript's "alert"
Stars: ✭ 21,871 (+2800.66%)
Mutual labels: dialog, modal
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-97.21%)
Mutual labels: modal, dialog
Popupdialog
A simple, customizable popup dialog for iOS written in Swift. Replaces UIAlertController alert style.
Stars: ✭ 3,709 (+391.91%)
Mutual labels: dialog, modal
wechat-miniprogram-dialog
微信小程序弹窗组件 wxapp dialog component
Stars: ✭ 50 (-93.37%)
Mutual labels: modal, dialog
svelte-accessible-dialog
An accessible dialog component for Svelte apps
Stars: ✭ 24 (-96.82%)
Mutual labels: modal, dialog
React Native Actions Sheet
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
Stars: ✭ 412 (-45.36%)
Mutual labels: dialog, modal
Ngx Sweetalert2
Declarative, reactive, and template-driven SweetAlert2 integration for Angular
Stars: ✭ 503 (-33.29%)
Mutual labels: dialog, modal
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
Other
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].