Building a Flow

In this section we are explaining how to create a controlled flow component. Now that you’ve installed React Flow into your React project, all files are in place to start using React Flow.

Getting Started

Let’s create an empty flow with a controls panel and a background. For this we need to import the components from the reactflow package:

import { ReactFlow, Background, Controls } from '@xyflow/react';

We can now use the components to render an empty flow:

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

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

There are three important things to keep in mind here:

1. You need to import the styles. Otherwise React Flow won’t work.
2. The parent container needs a width and a height, because React Flow uses its parent dimensions.
3. If you have multiple flows on one page, you need to pass a unique id prop to each component to make React Flow work properly.

Adding Nodes

Now that the flow is set up, let’s add some nodes. To do this, you need to create an array with node objects like this:

const nodes = [
  {
    id: '1', // required
    position: { x: 0, y: 0 }, // required
    data: { label: 'Hello' }, // required
  },
];

These nodes can now be added to the flow:

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

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

Let’s add another node, configure labels and use the node type input for the first node.

const nodes = [
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
    type: 'input',
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'World' },
  },
];

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

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

There are plenty of ways to configure nodes. You can see the full list of options on the node option site.

This looks good. Let’s attach these two nodes.

Adding an Edge

Now that we have two nodes, let’s connect them with an edge.

To make an edge, we need to specify two attributes: the source node (where the edge begins) and the target node (where the edge ends). We use the id of the two nodes to specify this (in our example, our two nodes have ids of “1” and “2”):

const edges = [{ id: '1-2', source: '1', target: '2' }];

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

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

Let’s give this edge two properties that are built into React Flow, a label and a different type.

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

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

You made your first edge, nice work! You might have realised that you can’t drag or select nodes. In the next part you’ll learn how to make the flow interactive.