Using React Flow to plan a React project
Tags: react, webdev
Published: 2022-11-29 17:45:56

**Written by [Isaac Okoro](https://blog.logrocket.com/author/isaacjunior/)✏️**

Successful projects require a combination of adequate planning and architecture. Planning a project can be a pain, especially when you have to draw each flow on paper. Luckily, there are various products to help you plan your projects. In this article, we will look at how to use [React Flow](https://reactflow.dev/) to plan your next React project. 

Jump ahead:

*   [What is React Flow?](#what-react-flow)
*   [Building a custom React Flow](#building-custom-react-flow)
    *   [Styling our React Flow application](#styling-react-flow-application)
    *   [Creating React Flow nodes](#creating-react-flow-nodes)
    *   [Designing edges in React Flow](#designing-edges-react-flow)
    *   [Building React Flow UI](#Building-react-flow-ui)
*   [Why should you use React Flow?](#why-use-react-flow)

## What is React Flow? <a name="what-react-flow">

React Flow is a [React](https://blog.logrocket.com/tag/react/) library for creating interactive graphs and node-based editors. It can create workflows with decision-making and is also used for presentations. With React Flow, you can create your entire React project architecture programmatically, with the flexibility to customize each node diagrammatically: ![Using React Flow for a React Project](https://blog.logrocket.com/wp-content/uploads/2022/11/react-flow-project.png) 

React Flow is free to use, has an easy setup and integration, and takes less than five minutes to set up and use. It includes zooming and panning, multi-selection, and several event handlers integrated out of the box. 

Second, the React Flow library is highly flexible and customizable. The user can style [nodes and elements](https://reactflow.dev/docs/guides/custom-nodes/) to their preferences. The library also comes with several plugin supports for customization:

*   [MiniMap](https://reactflow.dev/docs/overview/plugin-components/#background): This plugin provides an overview of the entire flow in a small miniature section, thus granting the user quick navigation and overview abilities. This becomes very useful when the flow is big and can’t be viewed on one page
*   [Controls](https://reactflow.dev/docs/overview/plugin-components/#controls): This customizable control bar comes with the React Flow library. It consists of a bunch of valuable buttons that are used to control the zoom-in and out, fit-to-screen, and interactivity features of the flow
*   [Background](https://reactflow.dev/docs/overview/plugin-components/#background): This plugin helps with the graphical visualization of Canvas. When added to the React Flow component, it gives it a uniformly dotted background

To understand the reliability of our applications, we run tests on them to clear our doubts. React Flow is tested with [Cypress](https://blog.logrocket.com/unit-testing-react-cypress/). According to the [docs](https://reactflow.dev/docs/guides/testing/), it also supports testing with [Playwright](https://blog.logrocket.com/getting-started-playwright-component-testing/) and [Jest](https://blog.logrocket.com/jest-testing-top-features/). 

And, with [12k stars on Github](https://github.com/wbkd/react-flow) and an average weekly download of 161k, it's popular among devs. It has extensive community support that allows it to be maintained, thus giving users a long time assurance and scalability. 

To better understand how to use React Flow, let’s build our custom flow.

## Building a custom React Flow <a name="building-custom-react-flow">

Let’s start by scaffolding our React app. Run the command below to scaffold react in your preferred directory:

```javascript
yarn create react-app working-with-reactflow
```

Once we've installed the necessary packages and libraries, change the directory into the newly created project and run this command to install React Flow.

```javascript
 yarn add reactflow
```

### Styling our React Flow application <a name="styling-react-flow-application">

Before we build our React Flow application, let’s create a custom style for our application. Copy and paste the code below into the `src/index.css` file:

```css
html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```

### Creating React Flow nodes

Nodes are an essential feature of React Flow that allows you to render anything you like. 

According to the React Flow [docs](https://reactflow.dev/docs/overview/terms-and-definitions/#nodes), nodes are individual containers or components that contain brief information about the container by `type default`, `input`, or `output`. Each node can be placed in a precise location on Canvas using the `x` and `y` property to set its initial position. 

Now, let’s get started by building our first nodes. Create a `nodes.js` file in the `src` folder and paste the code below into it:

```javascript
export default [
  {
    id: "1",
    type: "input",
    data: { label: "User's Input" },
    position: { x: 500, y: 100 },
  },
  {
    id: "2",
    data: { label: "Process Input" },
    type: "default",
    position: { x: 500, y: 200 },
  },
  {
    id: "3",
    data: { label: "Print yes" },
    position: { x: 200, y: 350 },
  },
  { id: "4", data: { label: "Print No" }, position: { x: 500, y: 350 } },
  { id: "5", data: { label: "Retake test" }, position: { x: 850, y: 350 } },
  {
    id: "6",
    data: { label: "Retake Test Yes" },
    position: { x: 1050, y: 450 },
  },
  { id: "7", data: { label: "Retake Test No" }, position: { x: 700, y: 450 } },
  {
    id: "8",
    type: "output",
    data: { label: "User's Output / End application" },
    position: { x: 500, y: 650 },
  },
];
```

In the code block above, we’re creating an array of objects. Each object contains a unique `id`, `type` (default if not specified), and `data`, which contains an object with the `label` property and, finally, a `position` property to specify the viewport position of the node.

### Designing edges in React Flow <a name="designing-edges-react-flow">

React Flow [edges](https://reactflow.dev/docs/overview/terms-and-definitions/#edges) are lines that connect nodes. Edges can connect to multiple nodes to form a [flow](https://reactflow.dev/docs/getting-started/building-a-flow/) and can be drawn and removed manually. 

To create an edge for our node, create an `edge.js` file in the `src` folder and paste the code below into it:

```javascript
export default [
  { id: "el1-2", source: "1", target: "2" },
  { id: "el2-3", source: "2", target: "3", animated: true },
  { id: "el2-4", source: "2", target: "4", animated: true },
  { id: "el2-5", source: "2", target: "5", animated: true },
  { id: "el6-1", source: "1", target: "6", label: "Back to Input" },
];
```

In the code block above, we’re creating an array of objects, where each object contains a unique `id`, the `source` where the edge starts, the `target` location, a `label` for identification, and an animated `Boolean` value.

### Building the React Flow UI <a name="Building-react-flow-ui">

With our nodes and edges in place, let’s use them in our React Flow application. Copy and paste the code below into a newly created `Flow.jsx` file:

```javascript
import { useCallback, useState } from "react";
import ReactFlow, {
  applyEdgeChanges,
  applyNodeChanges,
  addEdge,
  MiniMap,
  Controls,
  Background,
} from "reactflow";
import "reactflow/dist/style.css";
import initialNodes from "./nodes.js";
import initialEdges from "./edges.js";

function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  const onNodeChange = useCallback(
    (x) => setNodes((newNode) => applyNodeChanges(x, newNode)),
    [setNodes]
  );

  const onEdgeChange = useCallback(
    (x) => setEdges((eds) => applyEdgeChanges(x, eds)),
    [setEdges]
  );

  const onEdgeConnect = useCallback(
    (x) => setEdges((eds) => addEdge({ ...x, animated: true }, eds)),
    [setEdges]
  );

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodeChange}
      onEdgesChange={onEdgeChange}
      onConnect={onEdgeConnect}
    >
      <MiniMap />
      <Controls />
      <Background />
    </ReactFlow>
  );
}
export default Flow;
```

In the code block above, we created a state for the `initalNodes` and `initialEdges`, which are later used in the `ReactFlow` component. We also observe changes in the nodes and edges whenever their position is changed on Canvas. 

We’re making the edges connectable from wherever they’re drawn from one node to another by listening and updating the changes applied to the state using the `onConnect` property. 

We’re also utilizing the React Flow’s plugins to display the `MiniMap`, which gives us an overview of the entire flow, the `Controls` for the control panel, and the `Background` to improve the graphical representation of the canvas. 

With our progress so far, we should be able to get the following result: ![Creating a Custom React Flow for React Project](https://blog.logrocket.com/wp-content/uploads/2022/11/custom-react-flow-for-react.gif)

## Why should you use React Flow for your next React project? <a name="why-use-react-flow">

With many options in the development market, choosing a library that suits your requirements can be stressful. However, with React Flow, getting your project planned and architectured can be simplified, saving you stress. 

The React Flow library scores excellent for project planning because of its simplicity and flexibility. React Flow is trusted by thousands of users, including small open-source development teams and organizations like [Stripe](https://stripe.com/) and [Typeform](https://www.typeform.com/). The library has been used to create chatbot builders, music synthesizers, machine-learning tools, and more. 

Despite many rivals in the market, React Flow stands out as one of the best libraries for project planning and flow and remains beneficial for users throughout the development phase of large projects.

## Conclusion

In this article, we’ve looked at the React Flow library, its uses, and how you can plan your next React project. We’ve also built our custom flow to demonstrate the flexibility of React Flow. React Flow has other features that could be useful for your next project, so head over to the [docs](https://reactflow.dev/docs/introduction/) to learn more. 

You can see the complete [source code here](https://github.com/IsaacThaJunior/Working-with-React-flow).

---
##Cut through the noise of traditional React error reporting with LogRocket

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

[![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://lp.logrocket.com/blg/signup)

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.

Focus on the React bugs that matter — [try LogRocket today](https://lp.logrocket.com/blg/react-signup-issue-free).