I have a project that requires a dialog to be resizable and draggable. Material-UI Dialog documentation has steps on how to make it draggable. I want to find out the resizable part. Any suggestions on how to?

Sample code can be found here.

UPDATE:

Functional and typescript version of @Khabir's answer below

    import Button from '@material-ui/core/Button'

    import Dialog from '@material-ui/core/Dialog'

    import DialogActions from '@material-ui/core/DialogActions'

    import DialogContent from '@material-ui/core/DialogContent'

    import DialogContentText from '@material-ui/core/DialogContentText'

    import DialogTitle from '@material-ui/core/DialogTitle'

    import Paper, { PaperProps } from '@material-ui/core/Paper'

    import { makeStyles, Theme } from '@material-ui/core/styles'

    import TextField from '@material-ui/core/TextField'

    import React from 'react'

    import Draggable from 'react-draggable'

    import { ResizableBox } from 'react-resizable'



    const useStyles = makeStyles((theme: Theme) => ({

        resizable: {

            position: 'relative',

            '& .react-resizable-handle': {

                position: 'absolute',    

                width: 20,  

                height: 20,   

                bottom: 0,

                right: 0,

                background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'),

                'background-position': 'bottom right',

                padding: '0 3px 3px 0',

                'background-repeat': 'no-repeat',

                'background-origin': 'content-box',

                'box-sizing': 'border-box',

                cursor: 'se-resize',

            },

        },

    }))



    const PaperComponent = (props: PaperProps) => {

        return (

            <Draggable

                handle=#draggable-dialog-title

                cancel={'[class*=MuiDialogContent-root]'}

            >

                <Paper {...props} />

            </Draggable>

        )

    }



    export const DialogComponent = () => {

        const [open, setOpen] = React.useState<boolean>(false)

        const handleClickOpen = () => {

            setOpen(true)

        }



        const handleClose = () => {

            setOpen(false)

        }



        const classes = useStyles()



        return (

            <div>

                <Button onClick={handleClickOpen}>Open dd form dialog</Button>

                {open && (

                    <Dialog

                        open={true}

                        onClose={handleClose}

                        maxWidth={false}

                        PaperComponent={PaperComponent}

                        aria-labelledby=draggable-dialog-title

                    >

                        <ResizableBox

                            height={400}

                            width={600}

                            className={classes.resizable}

                        >

                            <DialogTitle

                                style={{ cursor: 'move' }}

                                id=draggable-dialog-title

                            >

                                Subscribe

                            </DialogTitle>



                            <DialogContent>

                                <DialogContentText>

                                    To subscribe to this website, please enter your email address here. We will send updates occasionally.

                                </DialogContentText>



                                <TextField

                                    autoFocus

                                    margin=dense

                                    id=name

                                    label=Email Address

                                    type=email

                                    fullWidth

                                />

                            </DialogContent>



                            <DialogActions>

                                <Button onClick={handleClose} color=primary>

                                    Cancel

                                </Button>

                                <Button onClick={handleClose} color=primary>

                                    Subscribe

                                </Button>

                            </DialogActions>

                        </ResizableBox>

                    </Dialog>

                )}

            </div>

        )

    }

typescript 3.8.3
@material-ui/core 4.9.7