ResizableBox

ResizableBox is a wrapper around the re-resizable package with pre-defined classes and styles.

Usage

Most options are passed directly through to re-resizable so you may wish to refer to their documentation. The primary differences in this component are that we set handleClasses (to use custom class names) and pass some null values to handleStyles (to unset some inline styles).

The example below shows how you might use ResizableBox to set a width and height inside a block’s edit component.

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

const Edit = ( props ) => {
    const {
        attributes: { height, width },
        setAttributes,
        toggleSelection,
    } = props;

    return (
        <ResizableBox
            size={ {
                height,
                width,
            } }
            minHeight="50"
            minWidth="50"
            enable={ {
                top: false,
                right: true,
                bottom: true,
                left: false,
                topRight: false,
                bottomRight: true,
                bottomLeft: false,
                topLeft: false,
            } }
            onResizeStop={ ( event, direction, elt, delta ) => {
                setAttributes( {
                    height: height + delta.height,
                    width: width + delta.width,
                } );
                toggleSelection( true );
            } }
            onResizeStart={ () => {
                toggleSelection( false );
            } }
        />
    );
};

Props

For additional props, check out re-resizable.