@xyflow/react 12.4.2 → 12.4.3

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

@@ -1,6 +1,8 @@
 import type { Edge, Node, ReactFlowState } from '../types';
 /**
- * Hook for accessing the internal store. Should only be used in rare cases.
+ * This hook can be used to subscribe to internal state changes of the React Flow
+ * component. The `useStore` hook is re-exported from the [Zustand](https://github.com/pmndrs/zustand)
+ * state management library, so you should check out their docs for more details.
  *
  * @public
  * @param selector
@@ -8,10 +10,29 @@ import type { Edge, Node, ReactFlowState } from '../types';
  * @returns The selected state slice
  *
  * @example
- * const nodes = useStore((state: ReactFlowState<MyNodeType>) => state.nodes);
+ * ```ts
+ * const nodes = useStore((state) => state.nodes);
+ * ```
  *
+ * @remarks This hook should only be used if there is no other way to access the internal
+ * state. For many of the common use cases, there are dedicated hooks available
+ * such as {@link useReactFlow}, {@link useViewport}, etc.
  */
 declare function useStore<StateSlice = unknown>(selector: (state: ReactFlowState) => StateSlice, equalityFn?: (a: StateSlice, b: StateSlice) => boolean): StateSlice;
+/**
+ * In some cases, you might need to access the store directly. This hook returns the store object which can be used on demand to access the state or dispatch actions.
+ *
+ * @returns The store object
+ *
+ * @example
+ * ```ts
+ * const store = useStoreApi();
+ * ```
+ *
+ * @remarks This hook should only be used if there is no other way to access the internal
+ * state. For many of the common use cases, there are dedicated hooks available
+ * such as {@link useReactFlow}, {@link useViewport}, etc.
+ */
 declare function useStoreApi<NodeType extends Node = Node, EdgeType extends Edge = Edge>(): {
     getState: () => ReactFlowState<NodeType, EdgeType>;
     setState: (partial: ReactFlowState<NodeType, EdgeType> | Partial<ReactFlowState<NodeType, EdgeType>> | ((state: ReactFlowState<NodeType, EdgeType>) => ReactFlowState<NodeType, EdgeType> | Partial<ReactFlowState<NodeType, EdgeType>>), replace?: boolean | undefined) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../../src/hooks/useStore.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI3D;;;;;;;;;;;GAWG;AACH,iBAAS,QAAQ,CAAC,UAAU,GAAG,OAAO,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,UAAU,EAC/C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,KAAK,OAAO,cASvD;AAED,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;;;;EAiB9E;AAED,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../../src/hooks/useStore.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAI3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,UAAU,GAAG,OAAO,EACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,UAAU,EAC/C,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,UAAU,KAAK,OAAO,cASvD;AAED;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,QAAQ,SAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,SAAS,IAAI,GAAG,IAAI;;;;EAiB9E;AAED,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,9 +1,47 @@
 import type { UpdateNodeInternals } from '@xyflow/system';
 /**
- * Hook for updating node internals.
+ * When you programmatically add or remove handles to a node or update a node's
+ *handle position, you need to let React Flow know about it using this hook. This
+ *will update the internal dimensions of the node and properly reposition handles
+ *on the canvas if necessary.
  *
  * @public
  * @returns function for updating node internals
+ *
+ * @example
+ * ```jsx
+ *import { useCallback, useState } from 'react';
+ *import { Handle, useUpdateNodeInternals } from '@xyflow/react';
+ *
+ *export default function RandomHandleNode({ id }) {
+ *  const updateNodeInternals = useUpdateNodeInternals();
+ *  const [handleCount, setHandleCount] = useState(0);
+ *  const randomizeHandleCount = useCallback(() => {
+ *   setHandleCount(Math.floor(Math.random() * 10));
+ *    updateNodeInternals(id);
+ *  }, [id, updateNodeInternals]);
+ *
+ *  return (
+ *    <>
+ *      {Array.from({ length: handleCount }).map((_, index) => (
+ *        <Handle
+ *          key={index}
+ *          type="target"
+ *          position="left"
+ *          id={`handle-${index}`}
+ *        />
+ *      ))}
+ *
+ *      <div>
+ *        <button onClick={randomizeHandleCount}>Randomize handle count</button>
+ *        <p>There are {handleCount} handles on this node.</p>
+ *      </div>
+ *    </>
+ *  );
+ *}
+ *```
+ * @remarks This hook can only be used in a component that is a child of a
+ *{@link ReactFlowProvider} or a {@link ReactFlow} component.
  */
 export declare function useUpdateNodeInternals(): UpdateNodeInternals;
 //# sourceMappingURL=useUpdateNodeInternals.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useUpdateNodeInternals.d.ts","sourceRoot":"","sources":["../../src/hooks/useUpdateNodeInternals.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAsB,MAAM,gBAAgB,CAAC;AAI9E;;;;;GAKG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAkB5D"}
+{"version":3,"file":"useUpdateNodeInternals.d.ts","sourceRoot":"","sources":["../../src/hooks/useUpdateNodeInternals.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAsB,MAAM,gBAAgB,CAAC;AAI9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAkB5D"}

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

@@ -1,9 +1,32 @@
 import type { Viewport } from '@xyflow/system';
 /**
- * Hook for getting the current viewport from the store.
+ * The `useViewport` hook is a convenient way to read the current state of the
+ *{@link Viewport} in a component. Components that use this hook
+ *will re-render **whenever the viewport changes**.
  *
  * @public
  * @returns The current viewport
+ *
+ * @example
+ *
+ *```jsx
+ *import { useViewport } from '@xyflow/react';
+ *
+ *export default function ViewportDisplay() {
+ *  const { x, y, zoom } = useViewport();
+ *
+ *  return (
+ *    <div>
+ *      <p>
+ *        The viewport is currently at ({x}, {y}) and zoomed to {zoom}.
+ *      </p>
+ *    </div>
+ *  );
+ *}
+ *```
+ *
+ * @remarks This hook can only be used in a component that is a child of a
+ *{@link ReactFlowProvider} or a {@link ReactFlow} component.
  */
 export declare function useViewport(): Viewport;
 //# sourceMappingURL=useViewport.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewport.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAW/C;;;;;GAKG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAItC"}
+{"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewport.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAW/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,IAAI,QAAQ,CAItC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useViewportHelper.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewportHelper.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,QAAO,uBAsI7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"useViewportHelper.d.ts","sourceRoot":"","sources":["../../src/hooks/useViewportHelper.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAExD;;;;;GAKG;AACH,QAAA,MAAM,iBAAiB,QAAO,uBA0I7B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}