Ant Design Draggable Modal

Modal from Ant Design, draggable. [![Version][version-badge]][package] [![Downloads][downloads-badge]][npmtrends] [![BundlePhobia](https://img.shields.io/bundlephobia/minzip/ant-design-draggable-modal.svg?style=flat-square)](https://bundlephobia.com/result?p=ant-design-draggable-modal) [![MIT License][license-badge]][license] [![Watch on GitHub][github-watch-badge]][github-watch] [![Star on GitHub][github-star-badge]][github-star] [![Tweet][twitter-badge]][twitter]

🌎 Example

✨ Features

[x] Drag with title bar.
[x] Resize with handle.
[x] Keep in bounds.
- [x] During drag.
- [x] During resize.
- [x] During resize window.
[x] Multiple modals with managed zIndex.
[x] Open from center.
[ ] Better API for using as a controlled component.
[ ] Open from quadrants.
[ ] Better escape key management.
[ ] Resize with option key.

📦 Install

yarn add ant-design-draggable-modal

NOTE: You must use react@16.8.0 and react-dom@16.8.0 or higher.

🔨 Usage

import React, { useState, useCallback } from 'react'
import { Button } from 'antd'
import { DraggableModal, DraggableModalProvider } from 'ant-design-draggable-modal'
import 'antd/dist/antd.css'
import 'ant-design-draggable-modal/dist/index.css'

const ModalWithButton = () => {
    const [visible, setVisible] = useState(false)
    const onOk = useCallback(() => setVisible(true), [])
    const onCancel = useCallback(() => setVisible(false), [])
    return (
        <>
            <Button onClick={onOk}>Open</Button>
            <DraggableModal visible={visible} onOk={onOk} onCancel={onCancel}>
                Body text.
            </DraggableModal>
        </>
    )
}

// DraggableModalProvider manages the zIndex
// of DraggableModals rendered beneath it.
const App = () => (
    <DraggableModalProvider>
        <ModalWithButton />
        <ModalWithButton />
        <ModalWithButton />
    </DraggableModalProvider>
)

⚠️ User Experience Warning

You should probably try to design your app not to need to use this, apps should usually not be window managers.

DylanVann / ant-design-draggable-modal

readme