ResizableBox

A wrapper used to resize the element. Is used on for example the default image block WordPress provides.

<ResizableBox
	size={ {
		height: props.attributes.height,
		width: props.attributes.width,
	} }
	minHeight="50"
	minWidth="50"
	__experimentalShowTooltip={true}
	__experimentalTooltipProps={{
		showPx: true,
		fadeTimeout: 1000,
	}}
	enable={ {
		top: false,
		right: true,
		bottom: true,
		left: false,
		topRight: false,
		bottomRight: true,
		bottomLeft: false,
		topLeft: false,
	} }
	onResizeStop={ ( event, direction, elt, delta ) => {
		props.setAttributes( {
			height: parseInt( props.attributes.height + delta.height, 10 ),
			width: parseInt( props.attributes.width + delta.width, 10 ),
		} );
		console.log("stops resizing")
	} }
	onResizeStart={ () => {
		console.log("starts resizing")
	} }
>
	<div>Hallo!</div>
</ResizableBox>

Has handy props as: “__experimentalShowTooltip”, “minHeight”, “minWidth”, “enable” (the directions the user can resize the element, “onResizeStop”, “onResizeStart” and “size” (which defines the current size).