ResizableBox – Automattic Design System

Import

import { ResizableBox } from '@wordpress/components';

Props

Name	Type	Default	Required
`children`	`ReactNode`		Yes
`showHandle`	`boolean`	`true`
`__experimentalShowTooltip`	`boolean`	`false`
`__experimentalTooltipProps`	`Parameters< typeof ResizeTooltip >[ 0 ]`	`{}`

Examples

Default

const Default = ( {
	onResizeStop,
	...props
} ) => {
	const [ { height, width }, setAttributes ] = useState( {
		height: 200,
		width: 400,
	} );

	return (
		<ResizableBox
			{ ...props }
			size={ {
				height,
				width,
			} }
			onResizeStop={ ( event, direction, elt, delta ) => {
				onResizeStop?.( event, direction, elt, delta );
				setAttributes( {
					height: height + delta.height,
					width: width + delta.width,
				} );
			} }
		/>
	);
};

Disabled Directions

The enable prop can be used to disable resizing in specific directions.

const DisabledDirections = ( {
	onResizeStop,
	...props
} ) => {
	const [ { height, width }, setAttributes ] = useState( {
		height: 200,
		width: 400,
	} );

	return (
		<ResizableBox
			{ ...props }
			size={ {
				height,
				width,
			} }
			onResizeStop={ ( event, direction, elt, delta ) => {
				onResizeStop?.( event, direction, elt, delta );
				setAttributes( {
					height: height + delta.height,
					width: width + delta.width,
				} );
			} }
		/>
	);
};