NodeProps<T>

Source on GitHub

When you implement a custom node it is wrapped in a component that enables basic functionality like selection and dragging. Your custom node receives the following props:


export type NodeProps<NodeType extends Node = Node> = {
  id: string;
  data: Node['data'];
  dragHandle?: boolean;
  type?: string;
  selected?: boolean;
  isConnectable?: boolean;
  zIndex?: number;
  positionAbsoluteX: number;
  positionAbsoluteY: number;
  dragging: boolean;
  targetPosition?: Position;
  sourcePosition?: Position;
};

Usage


import { useState } from 'react';
import { NodeProps, Node } from '@xyflow/react';
 
export type CounterNode = Node<
  {
    initialCount?: number;
  },
  'counter'
>;
 
export default function CounterNode(props: NodeProps<CounterNode>) {
  const [count, setCount] = useState(props.data?.initialCount ?? 0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button className="nodrag" onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Remember to register your custom node by adding it to the nodeTypes prop of your <ReactFlow /> component.


import { ReactFlow } from '@xyflow/react';
import CounterNode from './CounterNode';
 
const nodeTypes = {
  counterNode: CounterNode,
};
 
export default function App() {
  return <ReactFlow nodeTypes={nodeTypes} ... />
}

You can read more in our custom node guide.

Fields

Name	Type
#`id`	`string;`
#`data`	`T;`
#`dragHandle?`	`string;` A class name that can be applied to elements inside the node that allows those elements to act as drag handles, letting the user drag the node by clicking and dragging on those elements.
#`type`	`string;`
#`selected`	`boolean;`
#`isConnectable`	`boolean;`
#`zIndex`	`number;`
#`positionAbsoluteX`	`number;`
#`positionAbsoluteY`	`number;`
#`dragging`	`boolean;`
#`targetPosition`	`Position;`
#`sourcePosition`	`Position;`