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

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: