Skip to content

Commit

Permalink
added documentation for useInternalNode
Browse files Browse the repository at this point in the history
  • Loading branch information
peterkogo committed Sep 25, 2024
1 parent 1990d3a commit 658c349
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { type PropsTableProps } from 'xy-shared';

export const signature: PropsTableProps = {
props: [
{ name: 'Params' },
{
name: 'nodeId',
type: 'string',
description: 'The ID of a node you want to observe',
},
{ name: 'Returns' },
{
name: '',
type: 'InternalNode<T>',
description: 'The InternalNode object for the node with the given ID',
},
],
};
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"use-key-press": "useKeyPress()",
"use-node-id": "useNodeId()",
"use-nodes": "useNodes()",
"use-internal-node": "useInternalNode()",
"use-nodes-data": "useNodesData()",
"use-nodes-initialized": "useNodesInitialized()",
"use-nodes-state": "useNodesState()",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
title: useInternalNode
description: 'This hook returns an InternalNode object for the given node ID.'
---

import { PropsTable } from '@/components/props-table';
import { signature } from '@/page-data/reference/hooks/useInternalNode.ts';

# useInternalNode

[Source on GitHub](https://github.com/xyflow/xyflow/blob/main/packages/react/src/hooks/useInternalNode.ts)

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.

```jsx
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

<PropsTable {...signature} />

## Typescript

This hook accepts a generic type argument of custom node types. See this
[section in our Typescript guide](/learn/advanced-use/typescript#nodetype-edgetype-unions) for more information.

```tsx
const internalNode = useInternalNode<CustomNodeType>();
```

0 comments on commit 658c349

Please sign in to comment.