useInternalNode()

Source on GitHub

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

Parameters:

Name	Type	Default
`id`	`string` The ID of a node you want to observe.

Returns:

InternalNode<NodeType> | undefined

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>();