Reference
Hooks

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

Read more

useEdges

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

Read more

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.

Read more

useKeyPress

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

Read more

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.

Read more

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.

Read more

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.

Read more

useNodesState

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more

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.

Read more