Draggable React Bootstrap modal

DraggableModal.js

import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import Draggable from 'react-draggable';
import ModalDialog from 'react-bootstrap/ModalDialog';

class DraggableModalDialog extends React.Component {
	render() {
		return <Draggable handle=".modal-title"><ModalDialog {...this.props} /></Draggable>
	}
}

export default class BSModal extends Component {

	render() {
		return (
			<Modal
					dialogAs={DraggableModalDialog} 
					show={this.props.show} 
				 	onHide={this.props.close}>
				<Modal.Header>
					<Modal.Title>{this.props.title}</Modal.Title>
				</Modal.Header>
				<Modal.Body>
					{this.props.children}
				</Modal.Body>
				<Modal.Footer >
				</Modal.Footer>
			</Modal>
		);
	}
}

Thanks. This worked for me.

dialogAs={DraggableModalDialog} is important.

Hi, I just tried your code and this worked. Do you know what can I do to move the modal on dragging ? Currently, the modal is moving when I stop dragging.

Edit: Nevermind I just had to set the transition duration to 0s. Hope this will help someone