<NodeResizer />

Source on

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 '@xyflow/react';
 
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	Default
`nodeId`	`string` Id of the node it is resizing.
`color`	`string` Color of the resize handle.
`handleClassName`	`string` Class name applied to handle.
`handleStyle`	`CSSProperties` Style applied to handle.
`lineClassName`	`string` Class name applied to line.
`lineStyle`	`CSSProperties` Style applied to line.
`isVisible`	`boolean` Are the controls visible.	`true`
`minWidth`	`number` Minimum width of node.	`10`
`minHeight`	`number` Minimum height of node.	`10`
`maxWidth`	`number` Maximum width of node.	`Number.MAX_VALUE`
`maxHeight`	`number` Maximum height of node.	`Number.MAX_VALUE`
`keepAspectRatio`	`boolean` Keep aspect ratio when resizing.	`false`
`autoScale`	`boolean` Scale the controls with the zoom level.	`true`
`shouldResize`	`ShouldResize` Callback to determine if node should resize.
`onResizeStart`	`OnResizeStart` Callback called when resizing starts.
`onResize`	`OnResize` Callback called when resizing.
`onResizeEnd`	`OnResizeEnd` Callback called when resizing ends.

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.