Ant Design Draggable Modal
Modal from Ant Design, draggable.
!Versionversion-badgepackage !Downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense
!Watch on GitHubgithub-watch-badgegithub-watch !Star on GitHubgithub-star-badgegithub-star !Tweettwitter-badgetwitter
🌎 Example
✨ Features
- [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>
)