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

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.

This function does not accept any parameters.

Returns

string | null

Notes

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