https://github.com/dylanvann/ant-design-draggable-modal
The Modal from Ant Design, draggable.
https://github.com/dylanvann/ant-design-draggable-modal
ant-design draggable hacktoberfest modal react
Last synced: about 1 year ago
JSON representation
The Modal from Ant Design, draggable.
- Host: GitHub
- URL: https://github.com/dylanvann/ant-design-draggable-modal
- Owner: DylanVann
- License: mit
- Created: 2019-02-11T17:50:22.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-23T08:26:39.000Z (about 2 years ago)
- Last Synced: 2025-03-29T04:07:45.707Z (about 1 year ago)
- Topics: ant-design, draggable, hacktoberfest, modal, react
- Language: TypeScript
- Homepage: https://ant-design-draggable-modal.netlify.com
- Size: 3.43 MB
- Stars: 169
- Watchers: 6
- Forks: 52
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ant Design Draggable Modal
Modal from Ant Design, draggable.
[![Version][version-badge]][package]
[![Downloads][downloads-badge]][npmtrends]
[](https://bundlephobia.com/result?p=ant-design-draggable-modal)
[![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]
## 🌎 [Example](https://ant-design-draggable-modal.netlify.app/)
## ✨ 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](https://github.com/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