re-resizable: only resize one side

Question

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.

Answer 1

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.