NodeProps<T>
Source on GitHub (opens in a new tab)
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<T = any> = {
id: string;
data: T;
dragHandle?: boolean;
type?: string;
selected?: boolean;
isConnectable?: boolean;
zIndex?: number;
xPos: number;
yPos: number;
dragging: boolean;
targetPosition?: Position;
sourcePosition?: Position;
};
Usage
import { NodeProps } from 'reactflow';
import { useState } from 'react';
export type CounterData = {
initialCount?: number;
};
export default function CounterNode(props: NodeProps<CounterData>) {
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 'reactflow';
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; |
# xPos | number; |
# yPos | number; |
# dragging | boolean; |
# targetPosition | |
# sourcePosition |
Notes
-
If you have controls (like a slider) or other elements inside your custom node that should not drag the node you can add the class
nodrag
to those elements. This prevents the default drag behaviour as well as the default node selection behvaiour when elements with this class are clicked.export default function CustomNode(props: NodeProps) { return ( <div> <input className="nodrag" type="range" min={0} max={100} /> </div> ); }
-
If you have scroll containers inside your custom node you can add the class
nowheel
to disable the default canvas pan behaviour when scrolling inside your custom nodes.export default function CustomNode(props: NodeProps) { return ( <div className="nowheel" style={{ overflow: 'auto' }}> <p>Scrollable content...</p> </div> ); }
-
When creating your own custom nodes, you will also need to remember to style them! Custom nodes have no default styles unlike the built-in nodes so you can use any styling method you like such as styled components or tailwind.