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.

useInternalNode()

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

useKeyPress()

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

useNodeConnections()

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

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.

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

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.

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.