Getting Started With React Flow
Tags: react, webdev, javascript, tutorial
Published: 2023-08-29 17:09:08

Building node-based editors and pages with interactive diagrams has never been so easy.
![React Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrytmht7ufaxoyjt5e2s.png) 

**Why React Flow**

React Flow is an interactive JavaScript library. Being built on top on React and the super detailed documentation makes it very easy to make customizable components with interactive flowcharts, diagrams, and graphs.

**Introduction**

-> Nodes : A Node is a React Component. Basically it can render anything. By default, a Node looks like this.

![Default Nodes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xv39m4y6f3cp4ypo0gp3.png)

We can create Custom Nodes which can be used to do stuff like :

- Render form elements
- Visualize data
- Support multiple handles

Nodes can be defined as : 
```
const nodes = [
  {
    id: '1', //required
    position: { x: 0, y: 0 },//required
    data: { label: 'Hello' },//optional
    type: 'input', //optional
  },
{
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Hello' },
  },
];
```

> _We can use other components as labels_

-> Edges : An edge is used to connect two nodes. Every edge needs a source and a target node. React flow comes with four built-in edge types : 
 - Bezier(Default)
 - Smoothstep
 - Step
 - Straight

Edges can be styled using CSS and are completely customizable.
You can play around with Edges to make Custom Edges to:
- Add a button to remove an edge
- Custom routing behaviour to match with the application design and requirements.

If we have two or more nodes, edges can be defined as : 
```
const edges = [{ id: '1-2', source: '1', target: '2' }];
```


-> Handles : It is the place where an edge gets connected to the Node. The handle can be placed anywhere, and styled as you like.


**Let's Jump On to Creating a Simple Flow :**

Firstly, let's start with Adding React Flow to your react app 

```
npm install reactflow
```
or 
```
yarn add reactflow
```

The reactflow package exports the `<ReactFlow />` component as the default export. 
Next, is to use this component to create a basic flow.
```
import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';
function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;
```
> _The `< ReactFlow />` component must be wrapped in an element with a width and height._
_Remember to import the ReactFlow Styles_ .

`<ReactFlow />` component has various attributes.
The important ones to start with are nodes and edges.

React Flow also offers some built-in plugins, few of the one's I find useful are : **Controls**, **MiniMap** and **Background**.

They can be used as : 

```
<ReactFlow nodes={nodes} edges={edges}>
     <Background />
     <Controls />
     <MiniMap />
</ReactFlow>
```
And now, the basic version looks like : 

![Basic Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/an9wv808fmze0l4jdtor.png)



---
**Interactiveness**
To make this interactive, so that one can drag, remove and select nodes and edges we have to implement a **onNodesChange** and **onEdgesChange** handler.

Firstly, setup states for both nodes and edges.
The initial state will be set as nodes and edges we declared.

```
const [nodes, setNodes] = useState(initialNodes);
const [edges, setEdges] = useState(initialEdges);
```
Next, we need to implement the handlers.

```
const onNodesChange = (changes) => {
    setNodes((prevNodes) => {
      const updatedNodes = applyNodeChanges(changes, prevNodes);
      return updatedNodes;
    });
  };
  const onEdgesChange = (changes) => {
    setEdges((prevEdges) => {
      const updatedEdges = applyEdgeChanges(changes, prevEdges);
      return updatedEdges;
    });
  };
```
> _React Flow provides the applyNodeChanges and applyEdgeChanges for handling the changes, instead of us handling these changes manually._ 

With the above, we can drag the nodes, select the nodes and edges and remove them.

Now, if we want to connect the Nodes manually we have to use the **onConnect** handler.

```
  const onConnect =  (connection) => {
    setEdges((eds) => {
      const updatedEdges = addEdge(connection, eds);
      return updatedEdges;
    });
  };
```
> _React Flow also provides this addEdge handler_ .

![Final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnoanjcrbtlwi75jkybh.png)

A whole lot of other things and customizations can also be done. Do explore!

---

Did the article help or anything else would you like to suggest? Add a reaction or drop a comment below. 😉

---

Follow me on [Dev Community](https://dev.to/anadee11).
Connect with me here [Twitter](https://twitter.com/Anadee11_) & [LinkedIn](https://www.linkedin.com/in/anadee11/)