Skip to main content

Node Options

You create nodes by adding them to the nodes or defaultNodes array of the ReactFlow component.

Node example:

{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 }
}

Options

NameTypeDescription
id (required)stringUnique identifier
position (required){ x: number, y: number }For child nodes this position is relative to their parent
data (required)object
type'input', 'output' or 'default' + your custom typesDefines the node type
targetPosition'left', 'right', 'top' or 'bottom'Target position is 'top' by default
sourcePosition'left', 'right', 'top' or 'bottom'Source position is 'bottom' by default
parentNodestringNode id of the parent node
expandParentbooleanIf this is true the parent node gets expanded when you drag the child to the outer bounds
extent[[number, number], [number, number]] or 'parent'The moving range for a node. If it's a child that shouln't leave the parent node, set it to 'parent'
selectedbooleanIf true, the node is selected
hiddenbooleanIf true, the node will not be rendered
draggablebooleanIf option is not set, the node is draggable (overwrites general nodesDraggable option)
connectablebooleanIf option is not set, the node is connectable (overwrites general nodesConnectable option)
selectablebooleanIf option is not set, the node is selectable (overwrites general elementsSelectable option)
dragHandlestringSelector for specifying an element as a drag handle
styleCSSProperties
classNamestring
zIndexnumber, default: 0The zIndex property controls the stacking order of the nodes

Update Node Options

If you want to update the data or style attribute of a node it is important that you create a new object to notify react flow about the changes. You can see how to update a node in the update node example.