Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chenjiahan/rodal
A React modal with animations.
https://github.com/chenjiahan/rodal
animation dialog modal react
Last synced: 20 days ago
JSON representation
A React modal with animations.
- Host: GitHub
- URL: https://github.com/chenjiahan/rodal
- Owner: chenjiahan
- License: mit
- Created: 2015-08-28T02:34:00.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-08-01T03:02:04.000Z (over 1 year ago)
- Last Synced: 2024-05-23T06:38:56.180Z (6 months ago)
- Topics: animation, dialog, modal, react
- Language: CSS
- Homepage: https://chenjiahan.github.io/rodal/
- Size: 1.76 MB
- Stars: 910
- Watchers: 18
- Forks: 87
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components-all - rodal - A React modal with animations. (Uncategorized / Uncategorized)
- awesome-list - rodal - A React modal with animations. (Demos / JBoss Data Virtualization)
README
# Rodal [](https://travis-ci.org/chenjiahan/rodal) [](https://npmjs.org/package/rodal)
A React modal with animations.
[Example](https://chenjiahan.github.io/rodal/)
## Installation
```bash
# React 17 or 18
npm i rodal --save
# React 15 or 16, install rodal v1
npm i rodal@1 --save
```
## Usage
```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 (
show
Content
);
}
}
```
## 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](https://github.com/chenjiahan/vodal)