Resizing the parent while resizing the Rnd

[max-sym]

When resizing I need the parent to adjust its height as well. Currently, I'm trying the following and it doesn't work:

• When onResize fires in the following example, we update the containerRef element's height;
• The react-rnd doesn't update the boundaries while resizing is happening, so it doesn't work.

const Image = ({ element }) => {
  const [size, setSize] = useState({ width: 100, height: 100 })
  const [containerHeight, setContainerHeight] = useState(100)
  const containerRef = useRef()
  const initialValues = useRef({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
  })

  const onResize = (e, direction, ref, delta, position) => {
    setContainerHeight(`${ref.offsetHeight + 100}px`)
    setSize({
      width: ref.offsetWidth,
      height: ref.offsetHeight,
    })
  }

  return (
    <div ref={containerRef} style={{ position: 'relative', width: '100%' }}>
      <div contentEditable={false} style={{ userSelect: 'none', height: containerHeight }}>
        <Rnd
          bounds="parent"
          default={initialValues}
          disableDragging
          dragGrid={[50, 50]}
          enableResizing={{ bottomRight: true }}
          lockAspectRatio
          onDragStart={onDragStart}
          onResize={onResize}
          onResizeStart={onResizeStart}
          resizeGrid={[50, 50]}
          size={size}
          style={{ position: 'relative', transform: 'none', display: 'block' }}
        >
          <img
            alt=""
            draggable="false"
            src={element.url}
            style={{ width: '100%', height: '100%', userSelect: 'none' }}
          />
        </Rnd>
      </div>
    </div>
  )
}

Is there any workaround for that? Thanks for this amazing library! 🎉🎉🎉

[max-sym]

Ok, it seems that I made it by removing the bounds="parent" prop and adding maxWidth="100%". Here's the code:

const Image = ({ element }) => {
  const [size, setSize] = useState({ width: 100, height: 100 })
  const containerRef = useRef()
  const initialValues = useRef({
    x: 0,
    y: 0,
    width: 100,
    height: 100,
  })

  const onResize = (e, direction, ref, delta, position) => {
    setSize({
      width: ref.offsetWidth,
      height: ref.offsetHeight,
    })
  }

  return (
    <div ref={containerRef} style={{ position: 'relative', width: '100%' }}>
      <div contentEditable={false} style={{ userSelect: 'none' }}>
        <Rnd
          default={initialValues}
          disableDragging
          dragGrid={[50, 50]}
          enableResizing={{ bottomRight: true }}
          lockAspectRatio
          maxWidth="100%"
          onDragStart={onDragStart}
          onResize={onResize}
          resizeGrid={[50, 50]}
          size={size}
          style={{ position: 'relative', transform: 'none', display: 'block' }}
        >
          <img
            alt=""
            draggable="false"
            src={element.url}
            style={{ width: '100%', height: '100%', userSelect: 'none' }}
          />
        </Rnd>
      </div>
    </div>
  )
}