---
name: ResizableBox
package: '@wordpress/components'
category: Utilities
status: stable
canonical: 'https://system.automattic.design/components/resizablebox/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/components-resizablebox--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/resizable-box'
figma: 'https://www.figma.com/design/jMgzw8IhsMC4gpMbMko4lv/WPDS--Gutenberg-22.3-?node-id=16530-42695'
---

# ResizableBox

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

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `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` | — |  |
| `showHandle` | `boolean` | `true` |  |
| `__experimentalShowTooltip` | `boolean` | `false` |  |
| `__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` | — |  |


## Examples

### Default

```tsx
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.

```tsx
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 Tooltip

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

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