@xyflow/react 12.4.1 → 12.4.3

package/dist/umd/container/EdgeRenderer/MarkerDefinitions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkerDefinitions.d.ts","sourceRoot":"","sources":["../../../src/container/EdgeRenderer/MarkerDefinitions.tsx"],"names":[],"mappings":";AAMA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;;;;;AAgFF,wBAAuC"}
+{"version":3,"file":"MarkerDefinitions.d.ts","sourceRoot":"","sources":["../../../src/container/EdgeRenderer/MarkerDefinitions.tsx"],"names":[],"mappings":";AAMA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;;;;;AAkFF,wBAAuC"}

package/dist/umd/container/NodeRenderer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/NodeRenderer/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,IAAI,IAAI,CACzD,cAAc,CAAC,QAAQ,CAAC,EACtB,aAAa,GACb,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,2BAA2B,GAC3B,gBAAgB,GAChB,iBAAiB,GACjB,MAAM,GACN,qBAAqB,GACrB,YAAY,GACZ,WAAW,GACX,mBAAmB,CACtB,CAAC;AAUF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,EAAE,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA2DvF;kBA3DQ,qBAAqB;;;AA+D9B,eAAO,MAAM,YAAY,8BAA8D,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/NodeRenderer/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,iBAAiB,CAAC,QAAQ,SAAS,IAAI,IAAI,IAAI,CACzD,cAAc,CAAC,QAAQ,CAAC,EACtB,aAAa,GACb,mBAAmB,GACnB,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,2BAA2B,GAC3B,gBAAgB,GAChB,iBAAiB,GACjB,MAAM,GACN,qBAAqB,GACrB,YAAY,GACZ,WAAW,GACX,mBAAmB,CACtB,CAAC;AAUF,iBAAS,qBAAqB,CAAC,QAAQ,SAAS,IAAI,EAAE,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,2CA6DvF;kBA7DQ,qBAAqB;;;AAiE9B,eAAO,MAAM,YAAY,8BAA8D,CAAC"}

package/dist/umd/container/Pane/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;AAoBF,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,mBAAmB,EACnB,aAAkC,EAClC,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,EAAE,SAAS,2CAoMX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/Pane/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,cAAc,EAAkB,MAAM,aAAa,CAAC;AAElE,KAAK,SAAS,GAAG;IACf,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,OAAO,CACT,IAAI,CACF,cAAc,EACZ,eAAe,GACf,WAAW,GACX,kBAAkB,GAClB,gBAAgB,GAChB,aAAa,GACb,mBAAmB,GACnB,cAAc,GACd,kBAAkB,GAClB,iBAAiB,GACjB,kBAAkB,GAClB,iBAAiB,CACpB,CACF,CAAC;AAoBF,wBAAgB,IAAI,CAAC,EACnB,WAAW,EACX,mBAAmB,EACnB,aAAkC,EAClC,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,QAAQ,GACT,EAAE,SAAS,2CAwMX"}

package/dist/umd/container/ReactFlow/Wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CAwBA"}
+{"version":3,"file":"Wrapper.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/Wrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE9D,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,2CA0BA"}

package/dist/umd/container/ReactFlow/index.d.ts

@@ -1,5 +1,25 @@
 /// <reference types="react" />
 import type { Edge, Node, ReactFlowProps } from '../../types';
+/**
+ * The `<ReactFlow />` component is the heart of your React Flow application.
+ * It renders your nodes and edges and handles user interaction
+ *
+ * @public
+ *
+ * @example
+ * ```tsx
+ *import { ReactFlow } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (<ReactFlow
+ *    nodes={...}
+ *    edges={...}
+ *    onNodesChange={...}
+ *    ...
+ *  />);
+ *}
+ *```
+ */
 declare const _default: <NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: ReactFlowProps<NodeType, EdgeType> & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/umd/container/ReactFlow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;;AAoS9D,wBAA0C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/container/ReactFlow/index.tsx"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AA+S9D;;;;;;;;;;;;;;;;;;;GAmBG;;AACH,wBAA0C"}

package/dist/umd/contexts/NodeIdContext.d.ts

@@ -2,6 +2,34 @@
 export declare const NodeIdContext: import("react").Context<string | null>;
 export declare const Provider: import("react").Provider<string | null>;
 export declare const Consumer: import("react").Consumer<string | null>;
+/**
+ * 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.
+ *
+ * @public
+ * @returns id of the node
+ *
+ * @example
+ *```jsx
+ *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>;
+ *}
+ *```
+ */
 export declare const useNodeId: () => string | null;
 export default NodeIdContext;
 //# sourceMappingURL=NodeIdContext.d.ts.map

package/dist/umd/contexts/NodeIdContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeIdContext.d.ts","sourceRoot":"","sources":["../../src/contexts/NodeIdContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,wCAAqC,CAAC;AAChE,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAC/C,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAE/C,eAAO,MAAM,SAAS,QAAO,MAAM,GAAG,IAGrC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"NodeIdContext.d.ts","sourceRoot":"","sources":["../../src/contexts/NodeIdContext.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,aAAa,wCAAqC,CAAC;AAChE,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAC/C,eAAO,MAAM,QAAQ,yCAAyB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,SAAS,QAAO,MAAM,GAAG,IAGrC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/umd/hooks/useConnection.d.ts

@@ -1,9 +1,28 @@
 import { ConnectionState } from '@xyflow/system';
 import type { InternalNode, Node } from '../types';
 /**
- * Hook for accessing the connection state.
+ * The `useConnection` hook returns the current connection when there is an active
+ * connection interaction. If no connection interaction is active, it returns null
+ * for every property. A typical use case for this hook is to colorize handles
+ * based on a certain condition (e.g. if the connection is valid or not).
  *
  * @public
+ * @example
+ *
+ * ```tsx
+ *import { useConnection } from '@xyflow/react';
+ *
+ *function App() {
+ *  const connection = useConnection();
+ *
+ *  return (
+ *    <div> {connection ? `Someone is trying to make a connection from ${connection.fromNode} to this one.` : 'There are currently no incoming connections!'}
+ *
+ *   </div>
+ *   );
+ * }
+ * ```
+ *
  * @returns ConnectionState
  */
 export declare function useConnection<NodeType extends Node = Node, SelectorReturn = ConnectionState<InternalNode<NodeType>>>(connectionSelector?: (connection: ConnectionState<InternalNode<NodeType>>) => SelectorReturn): SelectorReturn;

package/dist/umd/hooks/useConnection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAqBnE;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,cAAc,GAAG,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAClH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,cAAc,GAC3F,cAAc,CAGhB"}
+{"version":3,"file":"useConnection.d.ts","sourceRoot":"","sources":["../../src/hooks/useConnection.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAwB,MAAM,gBAAgB,CAAC;AAGvE,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAqBnE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,cAAc,GAAG,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAClH,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,KAAK,cAAc,GAC3F,cAAc,CAGhB"}

package/dist/umd/hooks/useEdges.d.ts

@@ -1,9 +1,21 @@
 import type { Edge } from '../types';
 /**
- * Hook for getting the current edges from the store.
+ * This hook returns an array of the current edges. Components that use this hook
+ * will re-render **whenever any edge changes**.
  *
  * @public
  * @returns An array of edges
+ *
+ * @example
+ * ```tsx
+ *import { useEdges } from '@xyflow/react';
+ *
+ *export default function () {
+ *  const edges = useEdges();
+ *
+ *  return <div>There are currently {edges.length} edges!</div>;
+ *}
+ *```
  */
 export declare function useEdges<EdgeType extends Edge = Edge>(): EdgeType[];
 //# sourceMappingURL=useEdges.d.ts.map

package/dist/umd/hooks/useEdges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEdges.d.ts","sourceRoot":"","sources":["../../src/hooks/useEdges.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}
+{"version":3,"file":"useEdges.d.ts","sourceRoot":"","sources":["../../src/hooks/useEdges.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}

package/dist/umd/hooks/useInternalNode.d.ts

@@ -1,10 +1,30 @@
 import type { InternalNode, Node } from '../types';
 /**
- * Hook for getting an internal node by id
+ * This hook returns the internal representation of a specific node.
+ * Components that use this hook will re-render **whenever the node changes**,
+ * including when a node is selected or moved.
  *
  * @public
  * @param id - id of the node
  * @returns array with visible node ids
+ *
+ * @example
+ * ```tsx
+ *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>
+ *  );
+ *}
+ *```
  */
 export declare function useInternalNode<NodeType extends Node = Node>(id: string): InternalNode<NodeType> | undefined;
 //# sourceMappingURL=useInternalNode.d.ts.map

package/dist/umd/hooks/useInternalNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInternalNode.d.ts","sourceRoot":"","sources":["../../src/hooks/useInternalNode.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAO5G"}
+{"version":3,"file":"useInternalNode.d.ts","sourceRoot":"","sources":["../../src/hooks/useInternalNode.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,eAAe,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,EAAE,EAAE,MAAM,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG,SAAS,CAO5G"}

package/dist/umd/hooks/useKeyPress.d.ts

@@ -4,12 +4,30 @@ export type UseKeyPressOptions = {
     actInsideInputWithModifier?: boolean;
 };
 /**
- * Hook for handling key events.
+ * This hook lets you listen for specific key codes and tells you whether they are
+ * currently pressed or not.
  *
  * @public
  * @param param.keyCode - The key code (string or array of strings) to use
  * @param param.options - Options
  * @returns boolean
+ *
+ * @example
+ * ```tsx
+ *import { useKeyPress } from '@xyflow/react';
+ *
+ *export default function () {
+ *  const spacePressed = useKeyPress('Space');
+ *  const cmdAndSPressed = useKeyPress(['Meta+s', 'Strg+s']);
+ *
+ *  return (
+ *    <div>
+ *     {spacePressed && <p>Space pressed!</p>}
+ *     {cmdAndSPressed && <p>Cmd + S pressed!</p>}
+ *    </div>
+ *  );
+ *}
+ *```
  */
 export declare function useKeyPress(keyCode?: KeyCode | null, options?: UseKeyPressOptions): boolean;
 //# sourceMappingURL=useKeyPress.d.ts.map

package/dist/umd/hooks/useKeyPress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyPress.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAC7D,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAIF;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAKzB,OAAO,GAAE,OAAO,GAAG,IAAW,EAC9B,OAAO,GAAE,kBAA6E,GACrF,OAAO,CAmGT"}
+{"version":3,"file":"useKeyPress.d.ts","sourceRoot":"","sources":["../../src/hooks/useKeyPress.ts"],"names":[],"mappings":"AACA,OAAO,EAAkB,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;IAC7D,0BAA0B,CAAC,EAAE,OAAO,CAAC;CACtC,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,WAAW,CAOzB,OAAO,GAAE,OAAO,GAAG,IAAW,EAC9B,OAAO,GAAE,kBAA6E,GACrF,OAAO,CAuGT"}

package/dist/umd/hooks/useMoveSelectedNodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMoveSelectedNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useMoveSelectedNodes.ts"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQtF;;;;;GAKG;AACH,wBAAgB,oBAAoB,aAGa;IAAE,SAAS,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,UA+CzF"}
+{"version":3,"file":"useMoveSelectedNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useMoveSelectedNodes.ts"],"names":[],"mappings":"AACA,OAAO,EAAuC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQtF;;;;;GAKG;AACH,wBAAgB,oBAAoB,aAGa;IAAE,SAAS,EAAE,UAAU,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,UAiDzF"}

package/dist/umd/hooks/useNodeConnections.d.ts

@@ -7,7 +7,7 @@ type UseNodeConnectionsParams = {
     onDisconnect?: (connections: Connection[]) => void;
 };
 /**
- * Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
+ * This hook returns an array of connections on a specific node, handle type ('source', 'target') or handle ID.
  *
  * @public
  * @param param.id - node id - optional if called inside a custom node
@@ -16,6 +16,22 @@ type UseNodeConnectionsParams = {
  * @param param.onConnect - gets called when a connection is established
  * @param param.onDisconnect - gets called when a connection is removed
  * @returns an array with connections
+ *
+ * @example
+ * ```jsx
+ *import { useNodeConnections } from '@xyflow/react';
+ *
+ *export default function () {
+ *  const connections = useNodeConnections({
+ *    type: 'target',
+ *    handleId: 'my-handle',
+ *  });
+ *
+ *  return (
+ *    <div>There are currently {connections.length} incoming connections!</div>
+ *  );
+ *}
+ *```
  */
 export declare function useNodeConnections({ id, handleType, handleId, onConnect, onDisconnect, }?: UseNodeConnectionsParams): NodeConnection[];
 export {};

package/dist/umd/hooks/useNodeConnections.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodeConnections.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodeConnections.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,cAAc,EACd,UAAU,EAIX,MAAM,gBAAgB,CAAC;AAOxB,KAAK,wBAAwB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,GACb,GAAE,wBAA6B,GAAG,cAAc,EAAE,CA8BlD"}
+{"version":3,"file":"useNodeConnections.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodeConnections.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,cAAc,EACd,UAAU,EAIX,MAAM,gBAAgB,CAAC;AAOxB,KAAK,wBAAwB,GAAG;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,UAAU,EACV,QAAQ,EACR,SAAS,EACT,YAAY,GACb,GAAE,wBAA6B,GAAG,cAAc,EAAE,CA8BlD"}

package/dist/umd/hooks/useNodes.d.ts

@@ -1,9 +1,22 @@
 import type { Node } from '../types';
 /**
- * Hook for getting the current nodes from the store.
+ * This hook returns an array of the current nodes. Components that use this hook
+ * will re-render **whenever any node changes**, including when a node is selected
+ * or moved.
  *
  * @public
  * @returns An array of nodes
+ *
+ * @example
+ * ```jsx
+ *import { useNodes } from '@xyflow/react';
+ *
+ *export default function() {
+ *  const nodes = useNodes();
+ *
+ *  return <div>There are currently {nodes.length} nodes!</div>;
+ *}
+ *```
  */
 export declare function useNodes<NodeType extends Node = Node>(): NodeType[];
 //# sourceMappingURL=useNodes.d.ts.map

package/dist/umd/hooks/useNodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}
+{"version":3,"file":"useNodes.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodes.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAIrD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,EAAE,CAInE"}

package/dist/umd/hooks/useNodesData.d.ts

@@ -1,11 +1,23 @@
 import type { Node } from '../types';
 /**
- * Hook for receiving data of one or multiple nodes
+ * This hook lets you subscribe to changes of a specific nodes `data` object.
  *
  * @public
  * @param nodeId - The id (or ids) of the node to get the data from
- * @param guard - Optional guard function to narrow down the node type
  * @returns An object (or array of object) with {id, type, data} representing each node
+ *
+ * @example
+ *
+ *```jsx
+ *import { useNodesData } from '@xyflow/react';
+ *
+ *export default function() {
+ *  const nodeData = useNodesData('nodeId-1');
+ *  const nodesData = useNodesData(['nodeId-1', 'nodeId-2']);
+ *
+ *  return null;
+ *}
+ *```
  */
 export declare function useNodesData<NodeType extends Node = Node>(nodeId: string): Pick<NodeType, 'id' | 'type' | 'data'> | null;
 export declare function useNodesData<NodeType extends Node = Node>(nodeIds: string[]): Pick<NodeType, 'id' | 'type' | 'data'>[];

package/dist/umd/hooks/useNodesData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodesData.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACvD,MAAM,EAAE,MAAM,GACb,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;AACjD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC"}
+{"version":3,"file":"useNodesData.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACvD,MAAM,EAAE,MAAM,GACb,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC;AACjD,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC"}

package/dist/umd/hooks/useNodesEdgesState.d.ts

@@ -1,19 +1,79 @@
 import { type Dispatch, type SetStateAction } from 'react';
 import type { Node, Edge, OnNodesChange, OnEdgesChange } from '../types';
 /**
- * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
+ * This hook makes it easy to prototype a controlled flow where you manage the
+ * state of nodes and edges outside the `ReactFlowInstance`. You can think of it
+ * like React's `useState` hook with an additional helper callback.
  *
  * @public
  * @param initialNodes
  * @returns an array [nodes, setNodes, onNodesChange]
+ * @example
+ *
+ *```tsx
+ *import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
+ *
+ *const initialNodes = [];
+ *const initialEdges = [];
+ *
+ *export default function () {
+ *  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+ *  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+ *
+ *  return (
+ *    <ReactFlow
+ *      nodes={nodes}
+ *      edges={edges}
+ *      onNodesChange={onNodesChange}
+ *      onEdgesChange={onEdgesChange}
+ *    />
+ *  );
+ *}
+ *```
+ *
+ * @remarks This hook was created to make prototyping easier and our documentation
+ * examples clearer. Although it is OK to use this hook in production, in
+ * practice you may want to use a more sophisticated state management solution
+ * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
+ *
  */
 export declare function useNodesState<NodeType extends Node>(initialNodes: NodeType[]): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnNodesChange<NodeType>];
 /**
- * Hook for managing the state of edges - should only be used for prototyping / simple use cases.
+ * This hook makes it easy to prototype a controlled flow where you manage the
+ * state of nodes and edges outside the `ReactFlowInstance`. You can think of it
+ * like React's `useState` hook with an additional helper callback.
  *
  * @public
  * @param initialEdges
  * @returns an array [edges, setEdges, onEdgesChange]
+ * @example
+ *
+ *```tsx
+ *import { ReactFlow, useNodesState, useEdgesState } from '@xyflow/react';
+ *
+ *const initialNodes = [];
+ *const initialEdges = [];
+ *
+ *export default function () {
+ *  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+ *  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+ *
+ *  return (
+ *    <ReactFlow
+ *      nodes={nodes}
+ *      edges={edges}
+ *      onNodesChange={onNodesChange}
+ *      onEdgesChange={onEdgesChange}
+ *    />
+ *  );
+ *}
+ *```
+ *
+ * @remarks This hook was created to make prototyping easier and our documentation
+ * examples clearer. Although it is OK to use this hook in production, in
+ * practice you may want to use a more sophisticated state management solution
+ * like Zustand {@link https://reactflow.dev/docs/guides/state-management/} instead.
+ *
  */
 export declare function useEdgesState<EdgeType extends Edge = Edge>(initialEdges: EdgeType[]): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnEdgesChange<EdgeType>];
 //# sourceMappingURL=useNodesEdgesState.d.ts.map

package/dist/umd/hooks/useNodesEdgesState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodesEdgesState.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesEdgesState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzE;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,EACjD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACxD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E"}
+{"version":3,"file":"useNodesEdgesState.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesEdgesState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGlF,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,EACjD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,aAAa,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EACxD,YAAY,EAAE,QAAQ,EAAE,GACvB,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAQ7E"}

package/dist/umd/hooks/useNodesInitialized.d.ts

@@ -2,11 +2,37 @@ export type UseNodesInitializedOptions = {
     includeHiddenNodes?: boolean;
 };
 /**
- * Hook which returns true when all nodes are initialized.
+ * This hook tells you whether all the nodes in a flow have been measured and given
+ *a width and height. When you add a node to the flow, this hook will return
+ *`false` and then `true` again once the node has been measured.
  *
  * @public
  * @param options.includeHiddenNodes - defaults to false
  * @returns boolean indicating whether all nodes are initialized
+ *
+ * @example
+ * ```jsx
+ *import { useReactFlow, useNodesInitialized } from '@xyflow/react';
+ *import { useEffect, useState } from 'react';
+ *
+ *const options = {
+ *  includeHiddenNodes: false,
+ *};
+ *
+ *export default function useLayout() {
+ *  const { getNodes } = useReactFlow();
+ *  const nodesInitialized = useNodesInitialized(options);
+ *  const [layoutedNodes, setLayoutedNodes] = useState(getNodes());
+ *
+ *  useEffect(() => {
+ *    if (nodesInitialized) {
+ *      setLayoutedNodes(yourLayoutingFunction(getNodes()));
+ *    }
+ *  }, [nodesInitialized]);
+ *
+ *  return layoutedNodes;
+ *}
+ *```
  */
 export declare function useNodesInitialized(options?: UseNodesInitializedOptions): boolean;
 //# sourceMappingURL=useNodesInitialized.d.ts.map

package/dist/umd/hooks/useNodesInitialized.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,0BAA0B,GAAG;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAsBF;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,0BAA2C,GAAG,OAAO,CAIjG"}
+{"version":3,"file":"useNodesInitialized.d.ts","sourceRoot":"","sources":["../../src/hooks/useNodesInitialized.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,0BAA0B,GAAG;IACvC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAkBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,0BAER,GACA,OAAO,CAIT"}

package/dist/umd/hooks/useOnSelectionChange.d.ts

@@ -3,10 +3,42 @@ export type UseOnSelectionChangeOptions = {
     onChange: OnSelectionChangeFunc;
 };
 /**
- * Hook for registering an onSelectionChange handler.
+ * This hook lets you listen for changes to both node and edge selection. As the
+ *name implies, the callback you provide will be called whenever the selection of
+ *_either_ nodes or edges changes.
  *
  * @public
  * @param params.onChange - The handler to register
+ *
+ * @example
+ * ```jsx
+ *import { useState } from 'react';
+ *import { ReactFlow, useOnSelectionChange } from '@xyflow/react';
+ *
+ *function SelectionDisplay() {
+ *  const [selectedNodes, setSelectedNodes] = useState([]);
+ *  const [selectedEdges, setSelectedEdges] = useState([]);
+ *
+ *  // the passed handler has to be memoized, otherwise the hook will not work correctly
+ *  const onChange = useCallback(({ nodes, edges }) => {
+ *    setSelectedNodes(nodes.map((node) => node.id));
+ *    setSelectedEdges(edges.map((edge) => edge.id));
+ *  }, []);
+ *
+ *  useOnSelectionChange({
+ *    onChange,
+ *  });
+ *
+ *  return (
+ *    <div>
+ *      <p>Selected nodes: {selectedNodes.join(', ')}</p>
+ *      <p>Selected edges: {selectedEdges.join(', ')}</p>
+ *    </div>
+ *  );
+ *}
+ *```
+ *
+ * @remarks You need to memoize the passed `onChange` handler, otherwise the hook will not work correctly.
  */
 export declare function useOnSelectionChange({ onChange }: UseOnSelectionChangeOptions): void;
 //# sourceMappingURL=useOnSelectionChange.d.ts.map

package/dist/umd/hooks/useOnSelectionChange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOnSelectionChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnSelectionChange.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,2BAA2B,QAY7E"}
+{"version":3,"file":"useOnSelectionChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnSelectionChange.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,MAAM,MAAM,2BAA2B,GAAG;IACxC,QAAQ,EAAE,qBAAqB,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,EAAE,2BAA2B,QAY7E"}

package/dist/umd/hooks/useOnViewportChange.d.ts

@@ -5,12 +5,30 @@ export type UseOnViewportChangeOptions = {
     onEnd?: OnViewportChange;
 };
 /**
- * Hook for registering an onViewportChange handler.
+ * The `useOnViewportChange` hook lets you listen for changes to the viewport such
+ *as panning and zooming. You can provide a callback for each phase of a viewport
+ *change: `onStart`, `onChange`, and `onEnd`.
  *
  * @public
  * @param params.onStart - gets called when the viewport starts changing
  * @param params.onChange - gets called when the viewport changes
  * @param params.onEnd - gets called when the viewport stops changing
+ *
+ * @example
+ * ```jsx
+ *import { useCallback } from 'react';
+ *import { useOnViewportChange } from '@xyflow/react';
+ *
+ *function ViewportChangeLogger() {
+ *  useOnViewportChange({
+ *    onStart: (viewport: Viewport) => console.log('start', viewport),
+ *    onChange: (viewport: Viewport) => console.log('change', viewport),
+ *    onEnd: (viewport: Viewport) => console.log('end', viewport),
+ *  });
+ *
+ *  return null;
+ *}
+ *```
  */
 export declare function useOnViewportChange({ onStart, onChange, onEnd }: UseOnViewportChangeOptions): void;
 //# sourceMappingURL=useOnViewportChange.d.ts.map

package/dist/umd/hooks/useOnViewportChange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOnViewportChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnViewportChange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,0BAA0B,QAc3F"}
+{"version":3,"file":"useOnViewportChange.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnViewportChange.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,MAAM,0BAA0B,GAAG;IACvC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,0BAA0B,QAc3F"}

package/dist/umd/hooks/useReactFlow.d.ts

@@ -1,9 +1,32 @@
 import type { ReactFlowInstance, Node, Edge } from '../types';
 /**
- * Hook for accessing the ReactFlow instance.
+ * 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
  * @returns ReactFlowInstance
+ *
+ * @example
+ * ```jsx
+ *import { useCallback, useState } from 'react';
+ *import { useReactFlow } from '@xyflow/react';
+ *
+ *export function NodeCounter() {
+ *  const reactFlow = useReactFlow();
+ *  const [count, setCount] = useState(0);
+ *  const countNodes = useCallback(() => {
+ *    setCount(reactFlow.getNodes().length);
+ *    // you need to pass it as a dependency if you are using it with useEffect or useCallback
+ *    // because at the first render, it's not initialized yet and some functions might not work.
+ *  }, [reactFlow]);
+ *
+ *  return (
+ *    <div>
+ *      <button onClick={countNodes}>Update count</button>
+ *      <p>There are {count} nodes in the flow.</p>
+ *    </div>
+ *  );
+ *}
+ *```
  */
 export declare function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): ReactFlowInstance<NodeType, EdgeType>;
 //# sourceMappingURL=useReactFlow.d.ts.map

package/dist/umd/hooks/useReactFlow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAgD,MAAM,UAAU,CAAC;AAI5G;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAsOA"}
+{"version":3,"file":"useReactFlow.d.ts","sourceRoot":"","sources":["../../src/hooks/useReactFlow.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAgD,MAAM,UAAU,CAAC;AAI5G;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,YAAY,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI,KAAK,iBAAiB,CAC3G,QAAQ,EACR,QAAQ,CACT,CAsOA"}