Skip to main content

Node Options

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

Node example:

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

Options

id (required)

Description:
Unique identifier
Type:
string

position (required)

Description:
For child nodes this position is relative to their parent
Type:
XYPosition ({ x: number, y: number })

data (required)

Type:
object

type

Description:
Defines the node type
Type:
'input', 'output' or 'default' + your custom types

targetPosition

Description:
Target position is 'top' by default
Type:
'left', 'right', 'top' or 'bottom'

sourcePosition

Description:
Source position is 'bottom' by default
Type:
'left', 'right', 'top' or 'bottom'

parentNode

Description:
Node id of the parent node
Type:
string

expandParent

Description:
If this is true the parent node gets expanded when you drag the child to the outer bounds
Type:
boolean

extent

Description:
The moving range for a node. If it's a child that shouln't leave the parent node, set it to 'parent'
Type:
CoordinateExtent or 'parent'

selected

Description:
If true, the node is selected
Type:
boolean

hidden

Description:
If true, the node will not be rendered
Type:
boolean

draggable

Description:
If option is not set, the node is draggable (overwrites general nodesDraggable option)
Type:
boolean

connectable

Description:
If option is not set, the node is connectable (overwrites general nodesConnectable option)
Type:
boolean

selectable

Description:
If option is not set, the node is selectable (overwrites general elementsSelectable option)
Type:
boolean

deletable

Description:
If option is not set, the node is deletable
Type:
boolean

dragHandle

Description:
Selector for specifying an element as a drag handle
Type:
string

style

Type:
CSSProperties

className

Type:
string

zIndex

Description:
The zIndex property controls the stacking order of the nodes
Type:
number, default: 0

ariaLabel

Description:
aria-label for the node. This has no default, because we assume that there is some text content in your node. If not, you could use this prop to make your nodes better accessible
Type:
string

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.

Typescript

A node uses the Node type:

type Node<T = any> = {
id: string;
position: XYPosition;
data: T;
type?: string;
style?: CSSProperties;
className?: string;
targetPosition?: Position;
sourcePosition?: Position;
hidden?: boolean;
selected?: boolean;
dragging?: boolean;
draggable?: boolean;
selectable?: boolean;
connectable?: boolean;
deletable?: boolean;
focusable?: boolean;
dragHandle?: string;
width?: number | null;
height?: number | null;
parentNode?: string;
zIndex?: number;
extent?: 'parent' | CoordinateExtent;
expandParent?: boolean;
positionAbsolute?: XYPosition;
ariaLabel?: string;

// only used internally
[internalsSymbol]?: {
z?: number;
handleBounds?: NodeHandleBounds;
isParent?: boolean;
};
};