useInternalNode

Source on GitHub (opens in a new tab)

This hook returns the internal representation of a specific node. Components that use this hook will re-render whenever any node changes, including when a node is selected or moved.

import { useInternalNode } from '@xyflow/react';
 
export default function () {
  const internalNode = useInternalNode('node-1');
  const absolutePosition = internalNode.internals.positionAbsolute;
 
  return (
    <div>
      The absolute position of the node is at:
      <p>x: {absolutePosition.x}</p>
      <p>y: {absolutePosition.y}</p>
    </div>
  );
}

Signature

Name	Type
#Params
#`nodeId`	`string` The ID of a node you want to observe
#Returns
#	`InternalNode<T>` The InternalNode object for the node with the given ID

Typescript

This hook accepts a generic type argument of custom node types. See this section in our Typescript guide for more information.

const internalNode = useInternalNode<CustomNodeType>();

useNodes()useNodesData()