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.

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

Your custom node receives the following props:

Name	Type	Default
`id`	`NodeType["id"]` Unique id of a node.
`data`	`NodeType["data"]` Arbitrary data passed to a node.
`width`	`NodeType["width"]`
`height`	`NodeType["height"]`
`sourcePosition`	`NodeType["sourcePosition"]` Only relevant for default, source, target nodeType. Controls source position.
`targetPosition`	`NodeType["targetPosition"]` Only relevant for default, source, target nodeType. Controls target position.
`dragHandle`	`NodeType["dragHandle"]` 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.
`parentId`	`NodeType["parentId"]` Parent node id, used for creating sub-flows.
`type`	`NodeType["type"]` Type of node defined in nodeTypes
`dragging`	`NodeType["dragging"]` Whether or not the node is currently being dragged.
`zIndex`	`NodeType["zIndex"]`
`selectable`	`NodeType["selectable"]`
`deletable`	`NodeType["deletable"]`
`selected`	`NodeType["selected"]`
`draggable`	`NodeType["draggable"]` Whether or not the node is able to be dragged.
`isConnectable`	`boolean` Whether a node is connectable or not.
`positionAbsoluteX`	`number` Position absolute x value.
`positionAbsoluteY`	`number` Position absolute y value.