Node

Deprecation of parentNode property! We have renamed the parentNode option to parentId in version 11.11.0. The old property is still supported but will be removed in version 12.

Source on GitHub (opens in a new tab)

The Node type represents everything React Flow needs to know about a given node. Many of these properties can be manipulated both by React Flow or by you, but some such as width and height should be considered read-only.

export type Node<
  NodeData extends Record<string, unknown> = Record<string, unknown>,
  NodeType extends string = string,
> = {
  id: string;
  position: XYPosition;
  data: NodeData;
  type?: NodeType;
  sourcePosition?: Position;
  targetPosition?: Position;
  hidden?: boolean;
  selected?: boolean;
  dragging?: boolean;
  draggable?: boolean;
  selectable?: boolean;
  connectable?: boolean;
  resizing?: boolean;
  deletable?: boolean;
  dragHandle?: string;
  width?: number | null;
  height?: number | null;
  parentId?: string;
  zIndex?: number;
  extent?: 'parent' | CoordinateExtent;
  expandParent?: boolean;
  ariaLabel?: string;
  focusable?: boolean;
  style?: React.CSSProperties;
  className?: string;
  origin?: NodeOrigin;
  handles?: NodeHandle[];
  measured?: {
    width?: number;
    height?: number;
  };
};

Fields

Name	Type
#`id`	`string`
#`position`	`XYPosition`
#`data`	`T`
#`type?`	`U`
#`sourcePosition?`	`Position`
#`targetPosition?`	`Position`
#`hidden?`	`boolean` Whether or not the node should be visible on the canvas.
#`selected?`	`boolean`
#`dragging?`	`boolean` Whether or not the node is currently being dragged.
#`draggable?`	`boolean` Whether or not the node is able to be dragged.
#`selectable?`	`boolean`
#`connectable?`	`boolean`
#`resizing?`	`boolean`
#`deletable?`	`boolean`
#`dragHandle?`	`string`
#`width?`	`number \| null`
#`height?`	`number \| null`
#`parentNode?`	`string`
#`parentId?`	`string`
#`zIndex?`	`number`
#`extent?`	`"parent" \| CoordinateExtent`
#`expandParent?`	`boolean` When true, the parent node will automatically expand if this node is dragged to the edge of the parent node's bounds.
#`positionAbsolute?`	`XYPosition`
#`ariaLabel?`	`string`
#`focusable?`	`boolean`
#`style?`	`React.CSSProperties`
#`className?`	`string`
#`handles?`	`NodeHandle[]`
#`origin?`	`NodeOrigin`
#`measured?`	`{ width?: number, height?: number }`

Default node types

You can create any of React Flow's default nodes by setting the type property to one of the following values:

"default"
"input"
"output"
"group"

If you don't set the type property at all, React Flow will fallback to the "default" node with both an input and output port.

These default nodes are available even if you set the nodeTypes prop to something else, unless you override any of these keys directly.

Notes

You shouldn't try to set the width or height of a node directly. It is calculated internally by React Flow and used when rendering the node in the viewport. To control a node's size you should use the style or className props to apply CSS styles instead.

MiniMapNodeProps NodeProps