re-resizable: only resize one side

I'm using this re-resizable library to achieve the resize functionality. The requirement is to achieve the one-side resizing, which means if I resize from the right side of the div, only that side should expand to the right. The left side should stay in the same position.

I've read the docs and played around with the props but no luck. Thank you.

Here is my codesandbox.

3 Answers

You can use the handleClasses prop to apply css class names to particular sides. For example if you want to resize from only the right side, you can do the following:

.pointer-events-none { pointer-events: none; } 

<Resizable handleClasses={{ top: "pointer-events-none", bottom: "pointer-events-none", left: "pointer-events-none", topRight: "pointer-events-none", bottomRight: "pointer-events-none", bottomLeft: "pointer-events-none", topLeft: "pointer-events-none", }} > <YourComponent /> </Resizable> 

By excluding the right property in the handleClasses object you are disabling the pointer events on every side except the right side.

Your problem is the way you trying to combine Draggable and Resizable. As Resizable only changes the width of the container you must adjust the position(either with translate or left) when resizing from left or right to simulate div stays in place.

But instead of re-resizable I suggest using react-rnd. I think it is from the same author so the interface should be similar but this is already implemented there, you only have to use one component like this: codesandbox

You can use react-rnd, which does basically what you're doing here behind the scenes - only in a working implementation. If it doesn't work out of box for you, then you can at least study its code.

Do note that the library hasn't been updated in a long while - so if you rely on it, you're going to be on your own for ongoing maintenance.