react-resizable

The package provides two main components for different use cases:

1. <Resizable>: A raw, stateless component. It acts as a building block. You are responsible for managing the state (width/height) and passing it back into the component via callbacks like onResize.
2. <ResizableBox>: A high-level component that wraps a <div>. It manages its own basic state, making it much simpler for standard use cases where you just want a resizable container.

Use <Resizable> when you need fine-grained control over the resizing logic or when integrating with complex state management. Use <ResizableBox> for quick, self-contained resizable elements.

// Example of the stateless <Resizable>
<Resizable
  height={this.state.height}
  width={this.state.width}
  onResize={this.onResize}
>
  <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}} />
</Resizable>

// Example of the stateful <ResizableBox>
<ResizableBox
  width={200}
  height={200}
  minConstraints={[100, 100]}
>
  <div>Contents</div>
</ResizableBox>

You can override the default resize handle by passing a custom element or function to the handle prop. Crucially, your custom handle must forward its ref to the underlying DOM element so react-resizable can attach handlers and measure position.

Using a Native DOM Element

No special treatment required:

<Resizable handle={<div className="foo" />} />

Using a Custom React Component

You must use React.forwardRef to pass the ref and props to the DOM element.

Functional Component Example:

const MyHandle = React.forwardRef((props, ref) => {
  const {handleAxis, ...restProps} = props;
  return <div ref={ref} className={`foo handle-${handleAxis}`} {...restProps} />;
});

<Resizable handle={<MyHandle />} />

Using a Custom Function

You can pass a function that receives the axis and a ref. This is often cleaner for certain coding styles:

const MyHandle = (props) => {
  return <div ref={props.innerRef} className="foo" {...props} />;
};

<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} />} />

These props apply to both <Resizable> and <ResizableBox>. Unknown props not listed here are passed through to the child component.

Types for callbacks:

type ResizeCallbackData = {
  node: HTMLElement;
  size: {width: number; height: number};
  handle: ResizeHandleAxis;
};

type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';

type ResizeCallbackData = {
  node: HTMLElement;
  size: {width: number; height: number};
  handle: ResizeHandleAxis;
};

type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';

type ResizableProps = {
  children: React.ReactElement<any>;
  width: number;
  handle?:
    | React.ReactElement<any>
    | ((resizeHandle: ResizeHandleAxis, ref: React.RefObject<HTMLElement>) => React.ReactElement<any>);
  handleSize?: [number, number];
  lockAspectRatio?: boolean;
  axis?: 'both' | 'x' | 'y' | 'none';
  minConstraints?: [number, number];
  maxConstraints?: [number, number];
  onResizeStop?:  (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
  onResizeStart?: (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
  onResize?:      (e: React.SyntheticEvent, data: ResizeCallbackData) => any;
  draggableOpts?: Partial<React.ComponentProps<typeof import('react-draggable').DraggableCore>>;
  resizeHandles?: ResizeHandleAxis[];
  transformScale?: number;
};

The <Resizable> component accepts several props to control resizing behavior, constraints, and event handling.

Core Props

• width: number (Required if axis is 'both' or 'x')
• height: number (Required if axis is 'both' or 'y')
• axis: 'both' | 'x' | 'y' | 'none' (Controls which dimension can be resized)
• resizeHandles: An array of ResizeHandleAxis defining which handles are rendered.
• handle: A React element or a ResizeHandleFn to customize the resize handle.
• lockAspectRatio: boolean to maintain proportions during resize.
• minConstraints: [number, number] (Min width and height)
• maxConstraints: [number, number] (Max width and height)
• handleSize: [number, number] (Size of the resize handle)
• transformScale: number (Used if the parent has a CSS transform: scale(n) applied)

Event Callbacks

All resize callbacks receive a ResizeCallbackData object:

• onResizeStart: Called when resizing begins.
• onResize: Called continuously during resizing.
• onResizeStop: Called when resizing ends.

Draggable Options

You can pass draggableOpts to configure the underlying react-draggable behavior (e.g., grid, cancel, onStop).