Reference
Utils

Utils

addEdge()

This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don't add an invalid edge or duplicate an existing one.

Read more

applyEdgeChanges()

Various events on the ReactFlow component can produce an EdgeChange that describes how to update the edges of your flow in some way. If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.

Read more

applyNodeChanges()

Various events on the ReactFlow component can produce an NodeChange that describes how to update the edges of your flow in some way. If you don't need any custom behaviour, this util can be used to take an array of these changes and apply them to your edges.

Read more

getConnectedEdges()

Given an array of nodes that may be connected to one another and an array of all your edges, this util gives you an array of edges that connect any of the given nodes together.

Read more

getIncomers()

This util is used to tell you what nodes, if any, are connected to the given node as the source of an edge.

Read more

getNodesBounds()

Returns the bounding box that contains all the given nodes in an array. This can be useful when combined with getTransformForBounds to calculate the correct transform to fit the given nodes in a viewport.

Read more

getOutgoers()

This util is used to tell you what nodes, if any, are connected to the given node as the target of an edge.

Read more

getSmoothStepPath()

The getSmoothStepPath util returns everything you need to render a stepped path between two nodes. The borderRadius property can be used to choose how rounded the corners of those steps are.

Read more

getViewportForBounds()

This util returns the viewport for the given bounds. You might use this to pre-calculate the viewport for a given set of nodes on the server or calculate the viewport for the given bounds _without_ changing the viewport directly.

Read more

isEdge()

Test whether an object is useable as an Edge. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Edge if it returns true.

Read more

isNode()

Test whether an object is useable as an Node. In TypeScript this is a type guard that will narrow the type of whatever you pass in to Node if it returns true.

Read more

reconnectEdge()

A handy utility to reconnect an existing Edge with new properties. This searches your edge array for an edge with a matching id and updates its properties with the connection you provide.

Read more

getTransformForBounds()

This util tells you what to set the viewport to in order to fit the given bounds. You might use this to pre-calculate the viewport for a given set of nodes on the server or calculate the viewport for the given bounds _without_ changing the viewport directly.

Read more