# sc-rodal

> A React modal with animations.

Latest version **1.6.5** (published 2018-06-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install sc-rodal
pnpm add sc-rodal
yarn add sc-rodal
bun add sc-rodal
```

## 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.6.5 |
| Published | 2018-06-12 |
| First published | 2018-06-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 149.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | neverland |
| Maintainers | stephencawdery |
| Keywords | react, modal, animation, react-modal, react-component |

## Links

- npm: https://www.npmjs.com/package/sc-rodal
- Repository: https://github.com/steveconstnatine/rodal
- Homepage: https://github.com/chenjiahan/rodal#readme
- Issues: https://github.com/steveconstantine/rodal/issues
- npm.io page: https://npm.io/package/sc-rodal

## 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.6.5 (latest) — 2018-06-12
- 1.6.4 — 2018-06-12
- 1.6.3 — 2018-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](https://chenjiahan.github.com/rodal)

## Installation    
React 15/16

    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
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

## Animation Types
* zoom
* fade
* flip
* door
* rotate
* slideUp
* slideDown
* slideLeft
* slideRight

## Other
[Vue version](https://github.com/chenjiahan/vodal)

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