Implementation Notes

react-true-resizable is a React components that is written with modern React techniques and uses modern web API.

what Resizable actually do

react-true-resizable does not mutate the style of the target DOM node except for the width and height properties (in order to make the node resizable), and box-sizing property is set to border-box (in order to place the handles correctly).

the position property does not being mutated, and no DOM node is created and wrapped around the target node therefore the layout of the target DOM node will not be affected.

how handles are placed

the handles wanted position is calculated using getBoundingClientRect in with respect to the target DOM node, and placing them relative to their absolute positioned parent which will be injected as a children of the target DOM node using ReactPortal, this way can create Resizable solution that works independently of the target DOM node position style!

what other libs do

other resizable solutions are setting the position property to relative or absolute in order to place the handles correctly, which make their behavior be inconsistent between different positioning style.