Demos
Basic
Basic example, no fancy props.
Enable Relative Offset
when enableRelativeOffset
is set to true
, Resizable would also inject left
and top
CSS style,
in order to make the resizable element resizable more naturally on left and top handles.
note
left
and top
takes affect only when positioning is other than static.
in this example, we set the positioning style relative
, if we choose absolute
, the rest of the page layout wouldn't be
changed on resizing. the behavior of this demo(code block is heightened even when resizing from top) is the exactly wanted behavior.
Resizable and Draggable
You can use react-draggable with Resizable, but because react-draggable does not forward refs correctly, you will need to pass direct ref to resizable,namely, use Resizable.nodeRef prop instead of Resizable.children prop.
handle styling