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<NodeData = any, NodeType extends string | undefined = string | undefined> = {
  id: string;
  position: XYPosition;
  data: NodeData;
  type?: NodeType;
  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;
  };
};