# ResizableBox

ResizableBox is a wrapper around the [re-resizable package](https://github.com/bokuweb/re-resizable) with pre-defined classes and styles.

## Usage

Most options are passed directly through to [re-resizable](https://github.com/bokuweb/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.

``` jsx
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

| Name         | Type   | Default | Description                                   |
|--------------|--------|---------|-----------------------------------------------|
| `showHandle` | `bool` | `false` | Determines of the resize handles are visible. |

For additional props, check out [re-resizable](https://github.com/bokuweb/re-resizable#props).