Skip to content
The Modal from Ant Design, draggable.
Branch: master
Clone or download
Latest commit 9e38271 Mar 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.yarn/releases Use yarn policies. Feb 11, 2019
packages Ignore dist. Mar 19, 2019
.gitattributes It's TypeScript. Feb 12, 2019
.gitignore Monorepo. Feb 11, 2019
.yarnrc Use yarn policies. Feb 11, 2019
LICENSE Add license. Feb 12, 2019
README.md More social. Feb 25, 2019
lerna.json v0.0.13 Mar 19, 2019
package.json Upgrade dependencies. Mar 19, 2019
yarn.lock Use eslint. Mar 19, 2019

README.md

Ant Design Draggable Modal

Modal from Ant Design, draggable.

Version Downloads BundlePhobia MIT License

Watch on GitHub Star on GitHub Tweet

🌎 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

You can’t perform that action at this time.