<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.

Examples

Default Behavior

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.