rodal-on-animation-end

Rodal

A React modal with animations.
Example

Installation

React 15

npm i rodal --save

React 0.14

npm i rodal@1.2.10 --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
closeMaskOnClick	bool	true	wether clicking the mask closes the modal
showCloseButton	bool	true	whether to show close button
animation	string	zoom	animation type
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

Vue version