Allow controlled resizing

[yang]

Currently re-resizable exclusively owns the width/height during a resize. It would be powerful to make this controllable, so that users can implement (for instance) their own sizing (snapping, clamping, etc.) logic.

(As a hack for now, one can override the calculateNewSize method to always return auto, and then explicitly control the size of a grand-child div from the onResize callback.)

[jakub-chatrny]

One usecase where you can use it is when you have absolute position of box and you are resizing (left, top). You might want change (left, top) position.

[mdanka]

This is also a problem when using a scale transform.

For example, with a scale of 2:

An example implementation of this is how react-draggable exposes a DraggableCore element which truly doesn't manage any state, even while dragging: https://github.com/mzabriskie/react-draggable

As a workaround, you can use the "deprecated" updateSize method on the resizable instance to override the default sizing.

[jakub-chatrny]

Yep I face same issue using react-rnd (which extends re-resizable) Thanks for providing workaround @mdanka !

[chathuraa]

Another use case is when implementing auto scroll functionality to sync resizing with scroll speed.

[chathuraa]

Hi @yang ,

Would you mind giving an example. Also how would I go about resizing the left edge?

Thanks, Chat

[bokuweb]

@yang @jakub-chatrny @chathuraa @mdanka https://github.com/bokuweb/re-resizable/pull/391 resizeRatio is added. Could you please try it?

[JoshuaCWebDeveloper]

It wasn't immediately clear to me from reading this ticket, so I just wanted to clarify that this functionality does appear to be currently implemented in the latest version (using the size property and the resize handlers).

[codebycarlos]

Agree with @JoshuaCWebDeveloper; this can be accomplished by using the size property, setting it with your own state (i.e. width, height), and then on the onResize event changing dimensions as desired by updating the state. Should probably close this issue.