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
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;
}}