Ant Design Draggable Modal

🌎 Example

✨ Features

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

📦 Install

``bash
yarn add ant-design-draggable-modal
`

NOTE: You must use react@16.8.0 and react-dom@16.8.0 or higher.

🔨 Usage

`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 (
<>
Open

Body text.


)
}

// DraggableModalProvider manages the zIndex
// of DraggableModals rendered beneath it.
const App = () => (





)
``

⚠️ 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

[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