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.

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.

applyNodeChanges()

Various events on the ReactFlow component can produce a NodeChange that describes how to update the nodes 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 nodes.

getBezierPath()

The getBezierPath util returns everything you need to render a bezier edge between two nodes.

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.

getIncomers()

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

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.

getOutgoers()

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

getSimpleBezierPath()

The getSimpleBezierPath util returns everything you need to render a simple bezier edge between two nodes.

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.

getStraightPath()

Calculates the straight line path between two points.

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.

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.

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.

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.

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.

Types getTransformForBounds()