Skip to main content

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.

info

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: string
  • data: object
  • type: string
  • xPos: number
  • yPos: number
  • zIndex: number
  • selected: boolean
  • sourcePosition: string
  • targetPosition: string
  • dragging: boolean
  • isConnectable: boolean
  • dragHandle: string

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.