reactjsdrag-and-dropresizablereact-dndreact-resize-observer

Is it possible to change a value based on the direction when using onResize prop in react-rnd


Overview of the problem Hi team, I'm using react-rnd version [10.3.4]

My browser is: Chrome

Library using react-rnd

I am sure this issue is not a duplicate? I checked the issues but may have been missed.

Reproduced project - https://codesandbox.io/s/frosty-field-dul70?file=/src/Resize.js

Description Question - I'm trying to change a state based on the direction of resize. For ex- you can check in the above codesandbox link that if you resize the component in x or y axis the value changes. But I want the behavior to be only in y axis i.e. the value should not change when resizing on the x-axis.

Expected behavior Value inside the draggable/resizable component should change only in one axis or direction

Actual behavior Value is changing in both(x & y) axis/directions

Also, how can I change the value of itemHeight based on the direction. So if it's "bottom" itemHeight should increase and if it is "top" itemHeight should decrease. I suppose that you said "bottom" and "top" represent y-axis but is there any way specify the direction


Solution

  • You can use the second parameter on the onResize event. Bottom and Top represent the y axis

     onResize={(e, direction) => {
            if (direction !== "bottom" && direction !== "top") return itemHeight;
            return itemHeight < 100 ? setItemHeight(itemHeight + 1) : itemHeight;
          }}