ant-design-draggable-modal-4

    1.0.0 • Public • Published

    Ant Design Draggable Modal

    Modal from Ant Design, draggable.

    Version Downloads BundlePhobia MIT License

    Watch on GitHub Star on GitHub Tweet

    🌎 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 react@16.8.0 and react-dom@16.8.0 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

    Keywords

    none

    Install

    npm i ant-design-draggable-modal-4

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    5.15 MB

    Total Files

    30

    Last publish

    Collaborators

    • subhyaloid