Skip to main content

Props

PropTypeDefaultDescription
w / hnumber100Width and height
x / ynumber0Left / top relative to the parent element
rnumber0Rotation angle in degrees
znumber | string''z-index
bgstring''Background image URL
minWidth / minHeightnumber0Minimum resize dimensions
maxWidth / maxHeightnumberInfinityMaximum resize dimensions
lockbooleanfalseLock the aspect ratio
activebooleantrueWhether to show active state and controls
activeablebooleantrueWhether the element can be activated and operated
draggablebooleantrueWhether the element can be dragged
resizeablebooleantrueWhether the element can be resized
rotateablebooleantrueWhether the element can be rotated
sticksstring[]All 9 handlesVisible control subset. Options: tl tm tr mr br bm bl ml angle
uuidstring | number''Unique id returned in events
childrensChildConfig[]undefinedNested child component configuration
childWrapAttrHTMLAttributes<HTMLDivElement>undefinedWrapper attributes for nested children
overflowstring''Overflow style for the child wrapper
stickHoverRender(cursorRotate) => { x; y; htmlText }undefinedCustom cursor when hovering resize handles
limitX / limitY[number, number] | nullnullConstrain the rotated bounding box

The React package keeps Vue-compatible naming for childrens, resizeable, and rotateable.