Skip to Content
ReferenceComponents

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

NameTypeDefault
nodeIdstring

Id of the node it is resizing.

colorstring

Color of the resize handle.

handleClassNamestring

Class name applied to handle.

handleStyleCSSProperties

Style applied to handle.

lineClassNamestring

Class name applied to line.

lineStyleCSSProperties

Style applied to line.

isVisibleboolean

Are the controls visible.

true
minWidthnumber

Minimum width of node.

10
minHeightnumber

Minimum height of node.

10
maxWidthnumber

Maximum width of node.

Number.MAX_VALUE
maxHeightnumber

Maximum height of node.

Number.MAX_VALUE
keepAspectRatioboolean

Keep aspect ratio when resizing.

false
shouldResizeShouldResize

Callback to determine if node should resize.

onResizeStartOnResizeStart

Callback called when resizing starts.

onResizeOnResize

Callback called when resizing.

onResizeEndOnResizeEnd

Callback called when resizing ends.

Examples

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

import { ReactFlow, MiniMap, Background, BackgroundVariant, Controls, } from '@xyflow/react'; import ResizableNode from './ResizableNode'; import ResizableNodeSelected from './ResizableNodeSelected'; import CustomResizerNode from './CustomResizerNode'; import '@xyflow/react/dist/style.css'; const nodeTypes = { ResizableNode, ResizableNodeSelected, CustomResizerNode, }; const initialNodes = [ { id: '1', type: 'ResizableNode', data: { label: 'NodeResizer' }, position: { x: 0, y: 50 }, }, { id: '2', type: 'ResizableNodeSelected', data: { label: 'NodeResizer when selected' }, position: { x: 100, y: 300 }, }, { id: '3', type: 'CustomResizerNode', data: { label: 'Custom Resize Icon' }, position: { x: 150, y: 150 }, style: { height: 100, }, }, ]; const initialEdges = []; export default function NodeToolbarExample() { return ( <ReactFlow defaultNodes={initialNodes} defaultEdges={initialEdges} minZoom={0.2} maxZoom={4} fitView nodeTypes={nodeTypes} style={{ backgroundColor: "#F7F9FB" }} > <Background variant={BackgroundVariant.Dots} /> <MiniMap /> <Controls /> </ReactFlow> ); }

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.
Last updated on