Draggable React Bootstrap modal

DraggableModal.js

import { Modal } from 'react-bootstrap'
import ModalDialog from 'react-bootstrap/lib/ModalDialog'

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

// enforceForce=false causes recursion exception otherwise....
export default ({titleIconClass, modalClass, children, title, ...props}) =>
	<Modal dialogComponent={DraggableModalDialog} show={true} enforceFocus={false} backdrop="static" {...props}>
		<Modal.Header closeButton>
			<Modal.Title>
				{title}
			</Modal.Title>
		</Modal.Header>
		<Modal.Body>
			{children}
		</Modal.Body>
	</Modal>

Is Draggable not imported from somewhere?

Is Draggable not imported from somewhere?

Should be imported from react-draggable:

import Draggable from 'react-draggable';

For anyone that can't get it work, try change 'dialogComponent' to 'dialogComponentClass'

If you have error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Solution may be changing imports. The correct import of ModalDialog looks like this:

import * as ModalDialog from 'react-bootstrap/lib/ModalDialog';

If you have trouble with the newer version of react-bootstrap. Try my updated gist here https://gist.github.com/hungqcao/571fa6dfe0522847b182a228e4d852af

Use 'dialogAs' as opposed o 'dialogComponent' as of the v1.0.0 beta