• Stars
    star
    899
  • Rank 50,793 (Top 2 %)
  • Language
    CSS
  • License
    MIT License
  • Created about 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A React modal with animations.

Rodal Build Status NPM downloads

A React modal with animations.
Example

Installation

# React 17 or 18
npm i rodal --save

# React 15 or 16, install rodal v1
npm i rodal@1 --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
id string / id for dialog

Animation Types

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

Other

Vue version

More Repositories

1

vodal

A Vue modal with animations.
CSS
379
star
2

relect

A Tiny React Single Select Component.
JavaScript
35
star
3

util-ts

Utils for mobile browsers, built with TypeScript
TypeScript
25
star
4

vant-compiler

compile vue single file component to js file.
JavaScript
22
star
5

front-end-notes

Just notes.
HTML
21
star
6

template-string-optimize-loader

template string optimize loader module for webpack
JavaScript
16
star
7

babel-plugin-dynamic-import-polyfill

Add `array.iterator` polyfill for webpack dynamic import
JavaScript
11
star
8

vant-touch-emulator

本仓库已迁移至 https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator
JavaScript
9
star
9

vtap

Vue tap plugin to remove click delays in iOS devices.
TypeScript
8
star
10

vue-class

Decorator for building Vue2 & TypeScript2 Component.
TypeScript
7
star
11

pelican_front_end

Enterprise mailbox - Pelican
JavaScript
4
star
12

esbuild-plugin-vue-jsx

Vue3 JSX support for esbuild.
TypeScript
3
star
13

proom

cache script with localStorage
TypeScript
3
star
14

Diablo3-Trials

暗黑3达人测验
JavaScript
2
star
15

neverland

web design blog
JavaScript
2
star
16

vant-markdown-loader

本仓库已迁移至 https://github.com/youzan/vant/tree/dev/packages/vant-markdown-loader
JavaScript
2
star
17

vant-waterfall

本仓库已迁移至 https://github.com/youzan/vant/tree/dev/packages/vant-waterfall
JavaScript
2
star
18

vue-render-loader

Vue2 render loader for webpack
JavaScript
1
star
19

rspack-repro-bundle-analyze

JavaScript
1
star
20

vue-event-bubble-issue

Vue
1
star
21

lewiskit

Lewiskit's Personal Website
HTML
1
star
22

yiyong-frontend

易用联友会员管理系统
HTML
1
star
23

chenjiahan

1
star
24

eslint-config-vant

本仓库已迁移至 https://github.com/youzan/vant/tree/dev/packages/vant-eslint-config
JavaScript
1
star
25

issue-template-test

1
star
26

rspack-repro-transform-import

JavaScript
1
star
27

rsbuild-repro-worker-dynamic-import

JavaScript
1
star