ES Drager

Resize

ES Drager provides resize functionality through draggable handles on the edges and corners of the element. This allows for intuitive resizing of elements while maintaining aspect ratio or freely adjusting dimensions.

Basic Usage

To enable resizing, simply add the resizable prop to your Drager component:

<Drager
  className="w-32 h-32 bg-blue-500"
  resizable
>
  Resizable content
</Drager>
Try resizing!

Resize Handles

When resizable is enabled, eight resize handles appear:

  • Four corner handles (top-left, top-right, bottom-left, bottom-right)
  • Four edge handles (top, right, bottom, left)

Combining with Other Features

Resize functionality can be combined with other features like rotation, scaling, and connections:

<Drager
  className="w-32 h-32 bg-blue-500"
  resizable
  rotatable
  scalable
>
  Multi-feature element
</Drager>
Try all features!