rodal

    1.8.1 • Public • Published

    Rodal Build Status Dependency Status NPM downloads

    A React modal with animations.
    Example

    Installation

    npm i rodal --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

    Animation Types

    • zoom
    • fade
    • flip
    • door
    • rotate
    • slideUp
    • slideDown
    • slideLeft
    • slideRight

    Other

    Vue version

    Install

    npm i rodal

    DownloadsWeekly Downloads

    5,575

    Version

    1.8.1

    License

    MIT

    Unpacked Size

    188 kB

    Total Files

    9

    Last publish

    Collaborators

    • chenjiahan