Improve TSDoc comments for useNodesData, useReactFlow, isNode and isEdge

This commit is contained in:
Dimitri POSTOLOV
2025-04-06 04:52:08 +02:00
parent b9e4f82933
commit e6139a00d4
4 changed files with 22 additions and 13 deletions
+5
View File
@@ -0,0 +1,5 @@
---
'@xyflow/react': patch
---
Improve TSDoc comments for `useNodesData`, `useReactFlow`, `isNode` and `isEdge`
+6 -4
View File
@@ -8,11 +8,9 @@ import type { Node } from '../types';
* This hook lets you subscribe to changes of a specific nodes `data` object. * This hook lets you subscribe to changes of a specific nodes `data` object.
* *
* @public * @public
* @param nodeId - The id (or ids) of the node to get the data from * @returns An object (or array of object) with `id`, `type`, `data` representing each node.
* @returns An object (or array of object) with {id, type, data} representing each node
* *
* @example * @example
*
*```jsx *```jsx
*import { useNodesData } from '@xyflow/react'; *import { useNodesData } from '@xyflow/react';
* *
@@ -25,9 +23,13 @@ import type { Node } from '../types';
*``` *```
*/ */
export function useNodesData<NodeType extends Node = Node>( export function useNodesData<NodeType extends Node = Node>(
/** The id of the node to get the data from. */
nodeId: string nodeId: string
): Pick<NodeType, 'id' | 'type' | 'data'> | null; ): Pick<NodeType, 'id' | 'type' | 'data'> | null;
export function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[]; export function useNodesData<NodeType extends Node = Node>(
/** The ids of the nodes to get the data from. */
nodeIds: string[]
): Pick<NodeType, 'id' | 'type' | 'data'>[];
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useNodesData(nodeIds: any): any { export function useNodesData(nodeIds: any): any {
const nodesData = useStore( const nodesData = useStore(
-2
View File
@@ -31,8 +31,6 @@ const selector = (s: ReactFlowState) => !!s.panZoom;
* This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow. * This hook returns a ReactFlowInstance that can be used to update nodes and edges, manipulate the viewport, or query the current state of the flow.
* *
* @public * @public
* @returns ReactFlowInstance
*
* @example * @example
* ```jsx * ```jsx
*import { useCallback, useState } from 'react'; *import { useCallback, useState } from 'react';
+11 -7
View File
@@ -4,21 +4,23 @@ import { isNodeBase, isEdgeBase } from '@xyflow/system';
import type { Edge, Node } from '../types'; import type { Edge, Node } from '../types';
/** /**
* Test whether an object is useable as an [`Node`](/api-reference/types/node). * Test whether an object is usable as an [`Node`](/api-reference/types/node).
* In TypeScript this is a type guard that will narrow the type of whatever you pass in to * In TypeScript this is a type guard that will narrow the type of whatever you pass in to
* [`Node`](/api-reference/types/node) if it returns `true`. * [`Node`](/api-reference/types/node) if it returns `true`.
* *
* @public * @public
* @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true
* @param element - The element to test * @param element - The element to test.
* @returns A boolean indicating whether the element is an Node * @returns Tests whether the provided value can be used as a `Node`. If you're using TypeScript,
* this function acts as a type guard and will narrow the type of the value to `Node` if it returns
* `true`.
* *
* @example * @example
* ```js * ```js
*import { isNode } from '@xyflow/react'; *import { isNode } from '@xyflow/react';
* *
*if (isNode(node)) { *if (isNode(node)) {
* // .. * // ...
*} *}
*``` *```
*/ */
@@ -26,21 +28,23 @@ export const isNode = <NodeType extends Node = Node>(element: unknown): element
isNodeBase<NodeType>(element); isNodeBase<NodeType>(element);
/** /**
* Test whether an object is useable as an [`Edge`](/api-reference/types/edge). * Test whether an object is usable as an [`Edge`](/api-reference/types/edge).
* In TypeScript this is a type guard that will narrow the type of whatever you pass in to * In TypeScript this is a type guard that will narrow the type of whatever you pass in to
* [`Edge`](/api-reference/types/edge) if it returns `true`. * [`Edge`](/api-reference/types/edge) if it returns `true`.
* *
* @public * @public
* @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true * @remarks In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true
* @param element - The element to test * @param element - The element to test
* @returns A boolean indicating whether the element is an Edge * @returns Tests whether the provided value can be used as an `Edge`. If you're using TypeScript,
* this function acts as a type guard and will narrow the type of the value to `Edge` if it returns
* `true`.
* *
* @example * @example
* ```js * ```js
*import { isEdge } from '@xyflow/react'; *import { isEdge } from '@xyflow/react';
* *
*if (isEdge(edge)) { *if (isEdge(edge)) {
* // .. * // ...
*} *}
*``` *```
*/ */