<NodeResizer />

Source on GitHub (opens in a new tab)

The <NodeResizer /> component can be used to add a resize functionality to your nodes. It renders draggable controls around the node to resize in all directions.

import { memo } from 'react';
import { Handle, Position, NodeResizer } from 'reactflow';
 
const ResizableNode = ({ data }) => {
  return (
    <>
      <NodeResizer minWidth={100} minHeight={30} />
      <Handle type="target" position={Position.Left} />
      <div style={{ padding: 10 }}>{data.label}</div>
      <Handle type="source" position={Position.Right} />
    </>
  );
};
 
export default memo(ResizableNode);

Props

For TypeScript users, the props type for the <NodeResizer /> component is exported as NodeResizerProps.

Name	Type
#`nodeId?`	`string`
#`color?`	`string`
#`handleClassName?`	`string`
#`handleStyle?`	`React.CSSProperties`
#`lineClassName?`	`string`
#`lineStyle?`	`React.CSSProperties`
#`isVisible?`	`boolean`
#`minWidth?`	`number`
#`minHeight?`	`number`
#`maxWidth?`	`number`
#`maxHeight?`	`number`
#`keepAspectRatio?`	`boolean`
#`shouldResize?`	`(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => boolean`
#`onResizeStart?`	`(event: D3.DragEvent, params: ResizeParams) => void`
#`onResize?`	`(event: D3.DragEvent, params: ResizeParams & { direction: number[]; }) => void`
#`onResizeEnd?`	`(event: D3.DragEvent, params: ResizeParams) => void`

Examples

Head over to the example page to see how this is done.

Custom Resize Controls

To build custom resize controls, you can use the NodeResizeControl component and customize it.

Notes

Take a look at the docs for the NodeProps type or the guide on custom nodes to see how to implement your own nodes.