How to add child elements to ResizableRect ? about react-resizable-rotatable-draggable HOT 6 CLOSED

import React, { Fragment, useState } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable'

const ResizableContent = (props) => {
  const [width, setWidth] = useState(props.width)
  const [height, setHeight] = useState(props.height)
  const [top, setTop] = useState(props.top)
  const [left, setLeft] = useState(props.left)
  const [rotateAngle, setRotateAngle] = useState(props.rotateAngle)

  const contentStyle = { width, height, top, left, transform: `rotate(${rotateAngle}deg)`, position: 'absolute' }

  const handleResize = (style, isShiftKey, type) => {
    let { top, left, width, height } = style
    setWidth(Math.round(width))
    setHeight(Math.round(height))
    setTop(Math.round(top))
    setLeft(Math.round(left))
  }

  const handleRotate = (rotateAngle) => {
    setRotateAngle(rotateAngle)
  }

  const handleDrag = (deltaX, deltaY) => {
    setLeft(left + deltaX)
    setTop(top + deltaY)
  }

  return (
    <Fragment>
      <div style={contentStyle}>
        {props.children}
      </div>

      <ResizableRect
        top={top}
        rotatable
        left={left}
        aspectRatio
        minWidth={10}
        width={width}
        minHeight={10}
        height={height}
        onDrag={handleDrag}
        onRotate={handleRotate}
        onResize={handleResize}
        zoomable='nw, ne, se, sw'
        rotateAngle={rotateAngle} />
    </Fragment>
  )
}

export default ResizableContent

import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'

import ResizableContent from './ResizableContent'

const App = () => {
  return (
    <Fragment>
      <ResizableContent
        top={100}
        left={100}
        width={100}
        height={100}
        rotateAngle={0}>
        <div className='content content1'>content 1</div>
      </ResizableContent>

      <ResizableContent
        top={100}
        left={300}
        width={300}
        height={300}
        rotateAngle={0}>
        <div className='content content2'>content 2</div>
      </ResizableContent>
    </Fragment>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

import React, { Component } from 'react'
import ResizableRect from 'react-resizable-rotatable-draggable'

class App extends Component {
  constructor() {
    super()
    this.state = {
      width: 100,
      height: 100,
      top: 100,
      left: 100,
      rotateAngle: 0
    }
  }

  handleResize = (style, isShiftKey, type) => {
    // type is a string and it shows which resize-handler you clicked
    // e.g. if you clicked top-right handler, then type is 'tr'
    let { top, left, width, height } = style
    top = Math.round(top)
    left = Math.round(left)
    width = Math.round(width)
    height = Math.round(height)
    this.setState({
      top,
      left,
      width,
      height
    })
  }

  handleRotate = (rotateAngle) => {
    this.setState({
      rotateAngle
    })
  }

  handleDrag = (deltaX, deltaY) => {
    this.setState({
      left: this.state.left + deltaX,
      top: this.state.top + deltaY
    })
  }

  render() {
    const {width, top, left, height, rotateAngle} = this.state
    const buttonStyle = { width, height, top, left, transform: `rotate(${rotateAngle}deg)`, position: 'absolute' }
    return (
      <div className="App">
        <button style={buttonStyle} />
        <ResizableRect
          left={left}
          top={top}
          width={width}
          height={height}
          rotateAngle={rotateAngle}
          // aspectRatio={false}
          // minWidth={10}
          // minHeight={10}
          zoomable='n, w, s, e, nw, ne, se, sw'
          // rotatable={true}
          // onRotateStart={this.handleRotateStart}
          onRotate={this.handleRotate}
          // onRotateEnd={this.handleRotateEnd}
          // onResizeStart={this.handleResizeStart}
          onResize={this.handleResize}
          // onResizeEnd={this.handleUp}
          // onDragStart={this.handleDragStart}
          onDrag={this.handleDrag}
          // onDragEnd={this.handleDragEnd}
        />
      </div>
    )
  }
}

export default App