Woby-Modal

A woby modal with animations. A Rodal port

Example

Installation

pnpm add voby-modal --save

Usage

import { $, render } from 'woby'
import { Wodal } from 'woby-modal';

// include styles
import '../../dist/output.css'

const App = () => {
    const visible = $(false)

    const show = (v: string) => {
        animation(v)
        visible(true)
    }

    const hide = () => {
        visible(false)
    }

    return (
      <div>
        <button onClick={this.show.bind(this)}>show</button>

        <Wodal
            visible={visible}
            onClose={hide}
            animation={animation}
            closeOnEsc className='w-[50%] h-[25%]'
        >
            <div>Content</div>

            <button className="vodal-confirm-btn" onClick={hide}>
                ok
            </button>
            <button className="vodal-cancel-btn" onClick={hide}>
                close
            </button>
        </Wodal>
      </div>
    );
  }

render(<App />, document.getElementById('app'))

Props

Property	Type	Default	Description
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	w-[50%] h-[25%]	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