/ant-design-draggable-modal

The Modal from Ant Design, draggable.

Primary LanguageTypeScriptMIT LicenseMIT

Ant Design Draggable Modal

Modal from Ant Design, draggable.

Version Downloads BundlePhobia MIT License

Watch on GitHub Star on GitHub Tweet

Example of ant-design-draggable-modal.

🌎 Example

✨ 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.

📦 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.

License

MIT © DylanVann