Custom Nodes
If you want to add new node types, you need to pass a nodeTypes
object to the ReactFlow
component:
function Flow({ nodes, edges }) {
const nodeTypes = useMemo(() => ({ special: CustomNodeComponent }), []);
return <ReactFlow nodeTypes={nodeTypes} nodes={nodes} edges={edges} />;
}
You can now use the type special
for a node.
The default
, input
, output
and group
types would still be available, except you overwrote one of them.
There is a more advanced example of a custom node implementation in the custom node example.
You can find detailed information on how to implement and use a custom node in the custom nodes guide
Passed Prop Types
Your custom nodes are wrapped so that the basic functions like dragging or selecting work. Custom nodes receive the following props:
id
: stringdata
: objecttype
: stringxPos
: numberyPos
: numberzIndex
: numberselected
: booleansourcePosition
: stringtargetPosition
: stringdragging
: booleanisConnectable
: booleandragHandle
: string
Dimensions and other values from a node
If you need the width and height for example, you can use the useStore
function to access other node attributes:
const size = useStore((s) => {
const node = s.nodeInternals.get(id);
return {
width: node.width,
height: node.height,
};
});
This would re-render the custom node if the width or height change.
Styling
When you create a new node type you also need to implement some styling. Your custom node has no default styles.
Prevent dragging & selecting
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 name nodrag
. This also prevents the selection of a node.
Allow scrolling inside a node
If you want to allow scrolling inside a node or inside an element of a node you can add the class name nowheel
to the node or the element.
Helpers
React Flow comes with some helpers to give your custom nodes super powers:
- Node Resizer: Component for adding a resize UI
- Node Toolbar: Toolbar or tooltip component
- useNodeId: hook for accessing the node id within a custom node