Skip to main content

Demos

Basic

Basic example, no fancy props.

reset
Resizable

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.

reset
Resizable

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.

reset
Resizable

handle styling

reset
Resizable