reactflow-hooks

Useful hooks for ReactFlow

useAssertNodeId

A version of reactflow's useNode hook that throws an error if not called within a node instead of returning null.

function useAssertNodeId(): string | never;

useNode

A hook that returns the current node without subscribing to changes.

function useNode<T = any>(): Node<T> | never;

useNodeActions

A hook that returns actions that can be performed on the current node.

interface NodeActions {
    deleteNode: () => void;
}

function useNodeActions<T = any>(): NodeActions<T> | never;

useNodeState

A hook that subscribes to changes in the current node's state.

function useNodeState<T = any, U = Node<T>>(
    selector?: (node: Node<T>) => U, 
    equalityFn?: (a: U, b: U) => boolean
): U | never;

useNodeData

A hook that subscribes specifically to changes in the current node's data.

function useNodeData<T, U = T>(
    selector?: (data: T) => U,
    equalityFn?: (a: U, b: U) => boolean
): U | never;

useIngressEdges

A hook that returns the ingoing edges of the current node.

function useIngressEdges<T = any>(): ReactFlow.Edge<T>[] | never;

useEgressEdges

A hook that returns the outgoing edges of the current node.

function useEgressEdges<T = any>(): ReactFlow.Edge<T>[] | never;

useSourceNodes

A hook that returns the source nodes of the current node, i.e. the nodes that have an outgoing edge to the current node.

function useSourceNodes<T = any>(): ReactFlow.Node<T>[] | never;

useTargetNodes

A hook that returns the target nodes of the current node, i.e. the nodes that have an ingoing edge from the current node.

function useTargetNodes<T = any>(): ReactFlow.Node<T>[] | never;

useIsInputConnected

A subscribing hook that returns whether a given input handle of the current node is connected.

function useIsInputConnected(inputId: string): boolean | never;

useIsOutputConnected

A subscribing hook that returns whether a given output handle of the current node is connected.

function useIsOutputConnected(outputId: string): boolean | never;

useIsHandleConnected

A subscribing hook that returns whether a given handle of the current node is connected.

function useIsHandleConnected(handleId: string, handleType: HandleType): boolean | never;

Installation

npm

npm install reactflow-hooks

bun

bun install reactflow-hooks