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

The useEdges hook returns an array of the current edges store.

useHandleConnections()

This hook can be used to get notified when the connections of a handle change.

useInternalNode()

The useInternalNode hook returns an internal node.

useNodeConnections()

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

useNodes()

This hook returns a store of the current nodes array. When you subscribe to this store, it will trigger whenever the nodes array changes. This happens when nodes are added, removed, or updated (dragged for example).

useNodesData()

With this hook you can receive the data of the passed node ids.

useNodesInitialized()

The useNodesInitialized hook can be used to check if all nodes are initialized.

useStore()

The useStore hook can be used to access the internal store of the Svelte Flow.

useSvelteFlow()

The useSvelteFlow hook returns functions to update the viewport, transform coordinates or get node intersections for example.

useUpdateNodeInternals()

When you programmatically add or remove handles to a node or update a node's handle position, you need to inform Svelte Flow about it by using this hook. This will update the internal dimensions of the node and properly reposition handles on the canvas if necessary.