2.1.0 • Published 10 months ago
rodal v2.1.0
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
Other
2.1.0
10 months ago
2.0.1
1 year ago
2.0.0
2 years ago
1.8.2
2 years ago
1.8.3
2 years ago
1.8.1
4 years ago
1.8.0
4 years ago
1.7.0
5 years ago
1.6.3
6 years ago
1.6.2
6 years ago
1.6.1
7 years ago
1.6.0
7 years ago
1.5.6
7 years ago
1.5.5
7 years ago
1.5.4
7 years ago
1.5.3
7 years ago
1.5.2
7 years ago
1.5.1
7 years ago
1.5.0
7 years ago
1.4.1
7 years ago
1.4.0
7 years ago
1.3.5
7 years ago
1.3.4
8 years ago
1.3.3
8 years ago
1.3.2
8 years ago
1.3.1
8 years ago
1.3.0
8 years ago
1.2.10
8 years ago
1.2.9
8 years ago
1.2.8
8 years ago
1.2.7
8 years ago
1.2.6
8 years ago
1.2.5
8 years ago
1.2.4
8 years ago
1.2.3
8 years ago
1.2.2
8 years ago
1.2.1
8 years ago
1.2.0
8 years ago
1.1.2
9 years ago
1.1.1
9 years ago
1.1.0
9 years ago
1.0.9
9 years ago
1.0.8
9 years ago
1.0.7
9 years ago
1.0.6
9 years ago
1.0.5
9 years ago
1.0.4
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago