react-resizable-modal

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