zigzag-antd-modal
v0.0.1
Published
Modal from Ant Design, draggable.
Downloads
2
Readme
Modal from Ant Design, draggable.
🌎 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
yarn add ant-design-draggable-modal
NOTE: You must use [email protected]
and [email protected]
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