react-resizable-draggable-modal

Resizable draggable modal based on React hooks.

Install

npm i react-resizable-draggable-modal

Usage:

In your React component:

import ResizableDraggableModal from 'react-resizable-draggable-modal'
import 'react-resizable-draggable-modal/build/style.css'

<ResizableDraggableModal
  title='My Modal'
  visible={modalIsOpen}
  onClose={closeModal}
  onOk={closeModal}
>
  <div className='body'>
    <p>This is the modal body.</p>
  </div>
</ResizableDraggableModal>

Supported props

| Property | Description | Type | Default | ---- | ---- | ---- | ---- | left | Init left of the Modal | number | | top | Init top of the Modal | number | | initWidth | init Width of the Modal | number | 600 | initHeight | init Height of the Modal | number | 400 | minWidth | Minimum width when dragging | number | 300 | minHeight | Minimum height when dragging | number | 200 | resetRectOnOpen | When opening the modal, whether to reset rect(position and size) | boolean | draggable | Is it draggable | boolean | true | resizable | Is it resizable | boolean | true | verticalResizable | Is it resizable in the vertical direction? | boolean | true | horizontalResizable | Is it resizable in the horizontal direction? | boolean | true | overflowBoundary | Behavior beyond the parent container's boundaries | auto or hidden | auto | mask | Whether show mask or not | boolean | true | maskClosable | Whether to close the Modal when the mask (area outside the modal) is clicked | boolean | | visible | Is the modal open? | boolean | | getPopupContainer | To set the container of the Modal. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. | function | () => document.body | className | The class name of the modal | string | | title | The title of the modal | string | title | onDrag | Dragging the Modal is triggered | function | | onResize | Dragging the Modal is triggered | function | | footer | Footer content, set as footer={null} when you don't need default buttons | ReactNode | | onClose | Click the cancel button on the left side of the footer | function | | onOk | Click the ok button on the right side of the footer | function |