- Ant Design 5.x
- React 18.x
- Drag with title bar.
- Resize with handle.
- Keep in bounds.
- During drag.
- During resize.
- During resize window.
- Multiple modals with managed
zIndex
. - Open from center.
- Better API for using as a controlled component.
- Open from quadrants.
- Better escape key management.
- Resize with option key.
- Ant Design 5.x
- Modal
visible
toopen
yarn add @cubetiq/antd-modal
NOTE: You must use react@18
and react-dom@18
or higher and antd@5
or higher.
import { useState, useCallback } from 'react'
import { Button } from 'antd'
import { DraggableModal, DraggableModalProvider } from './packages/antd-modal/src/index.ts'
import '@cubetiq/antd-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 open={visible} onOk={onOk} onCancel={onCancel} onResize={() => {}}>
Body text.
</DraggableModal>
</>
)
}
// DraggableModalProvider manages the zIndex
// of DraggableModals rendered beneath it.
const App = () => (
<DraggableModalProvider>
<ModalWithButton />
<ModalWithButton />
<ModalWithButton />
</DraggableModalProvider>
)
You should probably try to design your app not to need to use this, apps should usually not be window managers.
MIT © DylanVann