Modal from Ant Design, draggable.
npm install ant-design-draggable-modalModal from Ant Design, draggable.
[![Version][version-badge]][package]
[![Downloads][downloads-badge]][npmtrends]

[![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]
- [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.
``bash`
yarn add ant-design-draggable-modal
NOTE: You must use react@16.8.0 and react-dom@16.8.0 or higher.
`tsx
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 (
<>
Body text.
>
)
}
// DraggableModalProvider manages the zIndex
// of DraggableModals rendered beneath it.
const App = () => (
)
``
You should probably try to design your app not to need to use this, apps should usually not be window managers.
MIT © DylanVann
[downloads-badge]: https://img.shields.io/npm/dm/ant-design-draggable-modal.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/ant-design-draggable-modal
[package]: https://www.npmjs.com/package/ant-design-draggable-modal
[version-badge]: https://img.shields.io/npm/v/ant-design-draggable-modal.svg?style=flat-square
[license-badge]: https://img.shields.io/npm/l/ant-design-draggable-modal.svg?style=flat-square
[license]: https://github.com/dylanvann/ant-design-draggable-modal/blob/master/LICENSE
[twitter]: https://twitter.com/home?status=Check%20out%20ant-design-draggable-modal%20by%20%40atomarranger%20https%3A//github.com/DylanVann/ant-design-draggable-modal
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/DylanVann/ant-design-draggable-modal.svg?style=social
[github-watch-badge]: https://img.shields.io/github/watchers/dylanvann/ant-design-draggable-modal.svg?style=social
[github-watch]: https://github.com/dylanvann/ant-design-draggable-modal/watchers
[github-star-badge]: https://img.shields.io/github/stars/dylanvann/ant-design-draggable-modal.svg?style=social
[github-star]: https://github.com/dylanvann/ant-design-draggable-modal/stargazers