<NodeResizer />

Source on GitHub 

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.

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.