react-resizable-modal
TypeScript icon, indicating that this package has built-in type declarations

0.0.0 • Public • Published

react-rnd-modal

Installation

React 16.8+

npm i react-resizeable-modal

Usage

import React, { useState } from 'react'
import Modal from 'react-resizeable-modal'

// include styles
import 'react-resizeable-modal/style/index.css'

function App() {
  const [visible, setVisible] = useState<boolean>(false)

  return (
    <div>
      <button onClick={() => setVisible(true)}>show</button>
      <Modal visible={visible} onClose={() => setVisible(false)}>
        <div>Content</div>
      </Modal>
    </div>
  )
}

Props

Property Type Default Description
width number - width of panel
height number - height of panel
measure string px measure of width and height
onClose function / handler called onClose of modal
onAnimationEnd function / handler called onEnd of animation
visible bool false whether to show panel
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 for the container
customMaskStyles object / custom mask styles for mask layer

Animation Types

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-resizable-modal

Weekly Downloads

1

Version

0.0.0

License

MIT

Unpacked Size

69.3 kB

Total Files

33

Last publish

Collaborators

  • nanyuantingfeng