Popularity
5.4
Growing
Activity
0.0
-
752
12
79

Monthly Downloads: 0
Programming language: CSS
License: MIT License
Tags: UI Components     Overlay     React     React-component     Animation     Modal     React-modal    
Latest version: v1.8.1

rodal alternatives and similar libraries

Based on the "Overlay" category.
Alternatively, view rodal alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of rodal or a related project?

Add another 'Overlay' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
Sponsored www.saashub.com

README

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