ReferenceHooks

useNodeId

Source on Github

You can use this hook to get the id of the node it is used inside. It is useful if you need the node’s id deeper in the render tree but don’t want to manually drill down the id as a prop.

import { useNodeId } from '@xyflow/react';
 
export default function CustomNode() {
  return (
    <div>
      <span>This node has an id of </span>
      <NodeIdDisplay />
    </div>
  );
}
 
function NodeIdDisplay() {
  const nodeId = useNodeId();
 
  return <span>{nodeId}</span>;
}

Signature

#Returns
string
The id for a node in the flow.

Notes

  • This hook should only be used within a custom node or its children.