Hooks

useConnection

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).

useEdges

This hook returns an array of the current edges. Components that use this hook will re-render whenever any edge changes.

useEdgesState

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.

useHandleConnections()

This hook returns an array of the current edges. Components that use this hook will re-render whenever any edge changes.

useKeyPress

This hook lets you listen for specific key codes and tells you whether they are currently pressed or not.

useNodeId

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.

useNodes

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.

useInternalNode

This hook returns an InternalNode object for the given node ID.

useNodesData()

With this hook you can subscribe to changes of a node data of a specific node.

useNodesInitialized

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.

useNodesState

useOnSelectionChange

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.

useOnViewportChange

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.

useReactFlow

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.

useStore

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 state management library, so you should check out their docs for more details.

useStoreApi

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.

useUpdateNodeInternals

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.

useViewport

The useViewport hook is a convenient way to read the current state of the Viewport in a component. Components that use this hook will re-render whenever the viewport changes.

Components Types