search

bokuweb / re-resizable

📏 A resizable component for React.
https://bokuweb.github.io/re-resizable/
MIT License
2.46k stars 220 forks source link

Allow controlled resizing #319

Open yang opened 6 years ago

yang commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

This is also a problem when using a scale transform.

For example, with a scale of 2: reresizable

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 commented 6 years ago

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

chathuraa commented 5 years ago

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

chathuraa commented 5 years ago

Hi @yang ,

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

Thanks, Chat

bokuweb commented 5 years ago

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

JoshuaCWebDeveloper commented 5 years ago

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 commented 2 years ago

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.

vincaslt commented 3 months ago

It isn't really contolled, the problem is that it maintains internal state and does the sizing based on that. It does accept and synchronize outside state via props, but while resizing it's ignored and the internal state is used, meaning that I'm not really controlling the size, for instance I can't stop resizing at some point (e.g. reached some boundary), because the internal state keeps going.