pogofdev / antd-modal

The Modal from Ant Design, draggable, resizable.

Ant Design Draggable Modal

Modal from Ant Design, draggable, resizable.

🌎 Example

Required

• Ant Design 5.x
• React 18.x

✨ Features

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

✨ Enhancements

• Ant Design 5.x
• Modal visible to open

📦 Install

yarn add @cubetiq/antd-modal

NOTE: You must use react@18 and react-dom@18 or higher and antd@5 or higher.

🔨 Usage

import { useState, useCallback } from 'react'
import { Button } from 'antd'
import { DraggableModal, DraggableModalProvider } from './packages/antd-modal/src/index.ts'
import '@cubetiq/antd-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 open={visible} onOk={onOk} onCancel={onCancel} onResize={() => {}}>
                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.

License

MIT © DylanVann

Enhanced for Ant Design 5.x by Sambo Chea