Getting Started With React Flow

#react #webdev #javascript #tutorial

Building node-based editors and pages with interactive diagrams has never been so easy.

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.

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

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 :

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;
    });
  };