react-animated-modal
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-animated-modal package

1.1.1 • Public • Published

Demo

Installation:

npm install --save react-animated-modal

Usage

import React from "react";
import Modal from "react-animated-modal";
 
export default class App extends React.Component {
    state = {
        showModal: false
    };
    render() {
        return (
            <div>
                <Modal
                    visible={this.state.showModal}
                    closemodal={() => this.setState({ showModal: false })}
                    type="flipInX"
                >
                    Some text or JSX inside modal goes here...
                </Modal>
                <div onClick={() => this.setState({ showModal: true })}>
                    Open Modal
                </div>
            </div>
        );
    }
}

Accepted props

Prop name Type Accepted values
closemodal() (required) function --
visible (required) boolean true / false
type enum pulse, rubberBand, shake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, flip, flipInX, flipInY, lightSpeedIn, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, slideInUp, slideInDown, slideInLeft, slideInRight, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, hinge, jackInTheBox, rollIn, bounce, flash

I will be adding more props soon. All PRs are welcome!

Cheers!!!

Package Sidebar

Install

npm i react-animated-modal

Weekly Downloads

240

Version

1.1.1

License

ISC

Unpacked Size

333 kB

Total Files

9

Last publish

Collaborators

  • morfsys