Automattic Design System

Components

ResizableBox

ResizableBox wraps content in a container with draggable handles, letting users interactively resize it along one or more edges or corners.

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

View on Storybook

View in Figma

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
as

string | ComponentType<any> | undefined

style

CSSProperties

className

string

grid

[number, number]

snap

{ x?: number[] | undefined; y?: number[] | undefined; }

snapGap

number

bounds

HTMLElement | "window" | "parent" | undefined

boundsByDirection

boolean

size

Size

minWidth

string | number | undefined

minHeight

string | number | undefined

maxWidth

string | number | undefined

maxHeight

string | number | undefined

lockAspectRatio

number | boolean | undefined

lockAspectRatioExtraWidth

number

lockAspectRatioExtraHeight

number

enable

Enable

handleStyles

HandleStyles

handleClasses

HandleClassName

handleWrapperStyle

CSSProperties

handleWrapperClass

string

handleComponent

HandleComponent

children

ReactNode

onResizeStart

ResizeStartCallback

onResize

ResizeCallback

onResizeStop

ResizeCallback

defaultSize

Size

scale

number

resizeRatio

number

showHandletrue

boolean

__experimentalShowTooltipfalse

boolean

__experimentalTooltipProps{}

Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { as?: ElementType | undefined; ... 9 more ...; zIndex?: number | undefined; } & RefAttributes<...>

ref

LegacyRef<Resizable> | undefined

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

key

Key | null | undefined

ExamplesPermalink to this section

DefaultPermalink to this section

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 DirectionsPermalink to this section

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,
				} );
			} }
		/>
	);
};

With Resize TooltipPermalink to this section

The resize size label is hidden by default. Enable it with __experimentalShowTooltip, or toggle that control in Storybook.

const WithResizeTooltip = ( {
	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,
				} );
			} }
		/>
	);
};