# rodal-on-animation-end

> A React modal with animations.

Latest version **1.5.3** (published 2017-06-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install rodal-on-animation-end
pnpm add rodal-on-animation-end
yarn add rodal-on-animation-end
bun add rodal-on-animation-end
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.3 |
| Published | 2017-06-12 |
| First published | 2017-06-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 904 |
| Author | neverland |
| Maintainers | lucasdellabella |
| Keywords | react, modal, animation, react-modal, react-component |

## Links

- npm: https://www.npmjs.com/package/rodal-on-animation-end
- Repository: https://github.com/chenjiahan/rodal
- Homepage: https://github.com/chenjiahan/rodal#readme
- Issues: https://github.com/chenjiahan/rodal/issues
- npm.io page: https://npm.io/package/rodal-on-animation-end

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.5.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.5.3 (latest) — 2017-06-12
- 1.5.2 — 2017-06-12

## README

# Rodal [![Build Status](https://img.shields.io/travis/chenjiahan/rodal.svg?style=flat-square)](https://travis-ci.org/chenjiahan/rodal) [![Dependency Status](https://david-dm.org/chenjiahan/rodal.svg?style=flat-square)](https://david-dm.org/chenjiahan/rodal) [![NPM downloads](http://img.shields.io/npm/dm/rodal.svg?style=flat-square)](https://npmjs.org/package/rodal)
A React modal with animations.  
[Example](http://rodal.cn)

## Installation    
React 15

    npm i rodal --save

React 0.14

    npm i rodal@1.2.10 --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 (
            <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](https://github.com/chenjiahan/vodal)

---
_Source: https://npm.io/package/rodal-on-animation-end · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._