Modal-g NPM | npm.io

modal-g

Modal component based on antd with React

Screenshot

Demo

online example: https://favori.gitee.io/gantd-landing (CodePen)

install

Feature

Support drag and resize
Can switch to maximize
Respond to browser window size changes in real time
Modal status persists during mounting
Support Modeless and multi-modal modes

Usage

import React, { useState } from 'react';
import Modal from 'modal-g';
import { Button } from 'antd';

function BasicUse() {
  const [visible, setVisible] = useState(false)
    const [widthAndHei, setWidthAndHei] = useState([400, 400])
    const onSizeChange = (width, height) => {
        setWidthAndHei([width, height])
    }
  return <div style={{ margin: 10 }}>
            <div style={{ marginBottom: 10 }}>
                <Button size="small" onClick={() => { setVisible(true) }}>click</Button>
            </div>
            <Modal
                title='custom title'
                itemState={{ height: 400, width: 400 }}
                visible={visible}
                footer={null}
                onCancel={() => { setVisible(false) }}
                onSizeChange={onSizeChange}
            >
                <div>
                    <h4>Dynamic width and height（included header+footer）:</h4>
                    <div>{`width:${widthAndHei[0]}px`}</div>
                    <div>{`height:${widthAndHei[1]}px`}</div>
                </div>
            </Modal>
        </div>
}

React.render(<BasicUse/>, mountNode);