re-resizable

Install the re-resizable package using npm to use the resizable component in your React project.

$ npm install --save re-resizable

If you need to manage the size state yourself, use the size prop. You must update your state within the onResizeStop callback to reflect the changes made by the user.

import { Resizable } from 're-resizable';

<Resizable
  size={{ width: this.state.width, height: this.state.height }}
  onResizeStop={(e, direction, ref, d) => {
    this.setState({
      width: this.state.width + d.width,
      height: this.state.height + d.height,
    });
  }}
>
  Sample with size
</Resizable>

Use the defaultSize prop to set the initial width and height of the component. If you only provide width, the height will automatically be set to auto (adjusting to 100% of the parent's height). Note that defaultSize is ignored if the size prop is provided.

import { Resizable } from 're-resizable';

<Resizable
  defaultSize={{
    width: 320,
    height: 200,
  }}
>
  Sample with default size
</Resizable>

You can programmatically update the component's size using a ref. Note that calling updateSize will cause the component to ignore grid, snap, and max/min dimension props for that update.

class YourComponent extends Component {
  // ...

  update() {
    this.resizable.updateSize({ width: 200, height: 300 });
  }

  render() {
    return (
      <Resizable ref={c => { this.resizable = c; }}>
        example
      </Resizable>
    );
  }

  // ...
}

Control which directions can be resized and listen to resize events:

• enable: An object specifying permissions for directions: top, right, bottom, left, topRight, bottomRight, bottomLeft, topLeft. Set to false to disable a direction.
• onResizeStart: Called when resizing begins. Receives (event, direction, refToElement).
• onResize: Called during resizing. Receives (event, direction, refToElement, delta).
• onResizeStop: Called when resizing ends. Receives (event, direction, refToElement, delta).

Manage how the component maintains its shape and stays within boundaries:

• lockAspectRatio: Set to true to lock based on initial size, or a number (e.g., 16/9) to lock a specific ratio.
• lockAspectRatioExtraWidth: Adds extra width to the aspect ratio (e.g., for a sidebar).
• lockAspectRatioExtraHeight: Adds extra height to the aspect ratio (e.g., for a header).
• bounds: Restricts resizing to 'window', 'parent', or a specific HTMLElement.
• boundsByDirection: If true, detects max dimensions by direction (useful when resizing from the left/top side).

Control the size limits and snapping behavior of the component using the following props:

• defaultSize: Initial { width, height }. Values can be number or string (e.g., 300, '300px', '50%').
• size: Controlled { width, height }.
• minWidth / minHeight: Minimum dimensions (defaults to 10px).
• maxWidth / maxHeight: Maximum dimensions.
• grid: Snap resizing to increments, e.g., [number, number]. Defaults to [1, 1].
• gridGap: Gaps between grid cells. Defaults to [0, 0].
• snap: Absolute pixel values to snap to via { x?: Array<number>, y?: Array<number> }.
• snapGap: Minimum gap required to move to the next snapping target. Defaults to 0.
• resizeRatio: Scaling factor for mouse/touch movement. Accepts number or [number, number] for independent X/Y ratios.

Override the visual style and structure of the resize handles:

• className: Custom class for the resizable component.
• style: Custom inline styles for the component.
• handleStyles: Override styles for specific handles (e.g., { right: { ... } }).
• handleClasses: Custom class names for handles.
• handleComponent: A React Component to use as the resize handle (e.g., an icon).
• handleWrapperStyle: Override styles for the handle's wrapper.
• handleWrapperClass: Custom class name for the handle's wrapper.
• as: Change the underlying HTML element (defaults to 'div').

You can customize the appearance and behavior of the resize handles using handleStyles, handleClasses, or handleComponent. Each property accepts an object where keys correspond to directions (top, right, bottom, left, topRight, bottomRight, bottomLeft, topLeft).

Example of using handleComponent to provide custom icons:

The Resizable component provides three callback props to hook into the resizing lifecycle:

1. onResizeStart: Called when the user starts dragging a handle.

   • Signature: (e: React.MouseEvent | React.TouchEvent, dir: Direction, elementRef: HTMLElement) => void | boolean.
   • Returning false from this callback will prevent the resize from starting.

2. onResize: Called continuously during the resize operation.

   • Signature: (event: MouseEvent | TouchEvent, direction: Direction, elementRef: HTMLElement, delta: NumberSize) => void.
   • delta contains the change in size: { width: number; height: number; }.

3. onResizeStop: Called when the user releases the handle.

   • Signature: (event: MouseEvent | TouchEvent, direction: Direction, elementRef: HTMLElement, delta: NumberSize) => void.