Computing Flows

Usually with React Flow, developers handle their data outside of React Flow by sending it somewhere else, like on a server or a database. Instead, in this guide we'll show you how to compute data flows directly inside of React Flow. You can use this for updating a node based on connected data, or for building an app that runs entirely inside the browser.

What are we going to build?

By the end of this guide, you will build an interactive flow graph that generates a color out of three separate number input fields (red, green and blue), and determines whether white or black text would be more readable on that background color.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Creating custom nodes

Let's start by creating a custom input node (NumberInput.js) and add three instances of it. We will be using a controlled <input type="number" /> and limit it to integer numbers between 0 - 255 inside the onChange event handler.

import { useCallback, useState } from 'react';
import { Handle, Position } from '@xyflow/react';
 
function NumberInput({ id, data }) {
  const [number, setNumber] = useState(0);
 
  const onChange = useCallback((evt) => {
    const cappedNumber = Math.round(
      Math.min(255, Math.max(0, evt.target.value)),
    );
    setNumber(cappedNumber);
  }, []);
 
  return (
    <div className="number-input">
      <div>{data.label}</div>
      <input
        id={`number-${id}`}
        name="number"
        type="number"
        min="0"
        max="255"
        onChange={onChange}
        className="nodrag"
        value={number}
      />
      <Handle type="source" position={Position.Right} />
    </div>
  );
}
 
export default NumberInput;

Next, we'll add a new custom node (ColorPreview.js) with one target handle for each color channel and a background that displays the resulting color. We can use mix-blend-mode: 'difference'; to make the text color always readable.

Let's also add edges going from the input nodes to the color node to our initialEdges array while we are at it.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Computing data

How do we get the data from the input nodes to the color node? This is a two step process that involves two hooks created for this exact purpose:

1. Store each number input value inside the node's data object with help of the updateNodeData callback.
2. Find out which nodes are connected by using useHandleConnections and then use useNodesData for receiving the data from the connected nodes.

Step 1: Writing values to the data object

First let's add some initial values for the input nodes inside the data object in our initialNodes array and use them as an initial state for the input nodes. Then we'll grab the function updateNodeData from the useReactFlow hook and use it to update the data object of the node with a new value whenever the input changes.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Step 2: Getting data from connected nodes

We start by determining all connections for each handle with the useHandleConnections hook and then fetching the data for the first connected node with updateNodeData.

And there you go! Try changing the input values and see the color change in real time.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Improving the code

It might seem awkward to get the connections first, and then the data seperately for each handle. For nodes with multiple handles like these, you should consider creating a custom handle component that isolates connection states and node data binding. We can create one inline.

// {...}
function CustomHandle({ id, label, onChange }) {
  const connections = useHandleConnections({
    type: 'target',
    id,
  });
 
  const nodeData = useNodesData(connections?.[0].source);
 
  useEffect(() => {
    onChange(nodeData?.data ? nodeData.data.value : 0);
  }, [nodeData]);
 
  return (
    <div>
      <Handle
        type="target"
        position={Position.Left}
        id={id}
        className="handle"
      />
      <label htmlFor="red" className="label">
        {label}
      </label>
    </div>
  );
}

We can promote color to local state and declare each handle like this:

// {...}
function ColorPreview() {
  const [color, setColor] = useState({ r: 0, g: 0, b: 0 });
 
  return (
    <div
      className="node"
      style={{
        background: `rgb(${color.r}, ${color.g}, ${color.b})`,
      }}
    >
      <CustomHandle
        id="red"
        label="R"
        onChange={(value) => setColor((c) => ({ ...c, r: value }))}
      />
      <CustomHandle
        id="green"
        label="G"
        onChange={(value) => setColor((c) => ({ ...c, g: value }))}
      />
      <CustomHandle
        id="blue"
        label="B"
        onChange={(value) => setColor((c) => ({ ...c, b: value }))}
      />
    </div>
  );
}
 
export default ColorPreview;

Getting more complex

Now we have a simple example of how to pipe data through React Flow. What if we want to do something more complex, like transforming the data along the way? Or even take different paths? We can do that too!

Continuing the flow

Let's extend our flow. Start by adding an output <Handle type="source" position={Position.Right} /> to the color node and remove the local component state.

Next, we add a new node (Lightness.js) that takes in a color object and determines if it is either a light or dark color. We can use the relative luminance formula (opens in a new tab) luminance = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b to calculate the perceived brightness of a color (0 being the darkest and 255 being the brightest). We can assume everything >= 128 is a light color.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Conditional branching

What if we would like to take a different path in our flow based on the perceived lightness? Let's give our lightness node two source handles light and dark and separate the node data object by source handle IDs. This is needed if you have multiple source handles to distinguish between each source handle's data.

But what does it mean to "take a different route"? One solution would be to assume that null or undefined data hooked up to a target handle is considered a "stop". In our case we can write the incoming color into data.values.light if it's a light color and into data.values.dark if it's a dark color and set the respective other value to null.

Don't forget to add flex-direction: column; and align-items: end; to reposition the handle labels.

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Cool! Now we only need a last node to see if it actually works... We can create a custom debugging node (Log.js) that displays the hooked up data, and we're done!

export default function App() {
  const data: string = "world"

  return <h1>Hello {data}</h1>
}

Summary

You have learned how to move data through the flow and transform it along the way. All you need to do is

1. store data inside the node's data object with help of updateNodeData callback.
2. find out which nodes are connected by using useHandleConnections and then use useNodesData for receiving the data from the connected nodes.

You can implement branching for example by interpreting incoming data that is undefined as a "stop". As a side note, most flowgraphs that also have a branching usually seperate the triggering of nodes from the actual data hooked up to the nodes. Unreal Engines Blueprints are a good example for this.