Creating Dynamic Visualizations with React Flow: Unveiling the Possibilities

This blog is written by Mohd Rihan Ansari and Muskan Dawar

In the world of web development, creating visually engaging and interactive applications has become a standard. React Flow, a powerful library built on top of React, has emerged as a game-changing tool for crafting dynamic visualizations and flowcharts. With its intuitive components and customization features, React Flow opens the door to a realm of possibilities in designing applications that are not only functional but also visually captivating.

React Flow:

React Flow is a visual programming library for building interactive node-based applications and workflows using React.js. It provides a set of components and utilities that allow developers to create dynamic and customizable graph-based interfaces with nodes and edges.

Here are some key points about React Flow:

• Node-Based Interface: React Flow enables you to create applications where users can arrange nodes (representing different elements or components) on a canvas and connect them using edges to define relationships or workflows.
• Customizability: The library offers a high degree of customization, allowing you to define the appearance, behaviour, and interactions of nodes and edges. You can style them according to your application’s design, define custom labels, and attach event handlers.
• Drag-and-Drop: React Flow simplifies the creation of drag-and-drop interfaces. Users can drag nodes from a palette and drop them onto the canvas, rearrange nodes, and connect them as needed.
• Real-time Updates: Changes to the graph are reflected in real time, allowing for dynamic and interactive user experiences. This makes it suitable for applications where the user needs to see immediate feedback as they build or modify workflows.
• Node Types and Ports: React Flow supports various node types, each representing a different element or component. Nodes can have multiple input and output ports that allow connections to other nodes.
• Layout Algorithms: The library provides layout algorithms that automatically arrange nodes on the canvas in an organized manner. This can be especially helpful when dealing with complex graphs.
• Integration with React: React Flow is designed to work seamlessly with React.js, leveraging React’s component-based architecture to create reusable and modular graph components.
• Modular Component Architecture: React Flow follows a modular architecture, providing a collection of reusable components that can be combined to create intricate visualisations. This modular approach enhances code organisation and makes it easier to maintain and extend the application.
• Responsive Design: The library is designed to be responsive, adapting to different screen sizes and orientations. This makes React Flow suitable for both desktop and mobile applications, providing a consistent user experience across devices.
• Usage Scenarios: React Flow can be used for a wide range of applications, such as flowchart builders, diagram editors, visual programming interfaces, and more.

Real-World Applications

• Project Management Tools: React Flow can be used to create visual representations of project timelines, task dependencies, and resource allocation.
• Data Visualisation Platforms: Developers can leverage React Flow to build data visualisation dashboards, showcasing complex relationships and trends in a user-friendly manner.
• Workflow Automation: React Flow is an excellent choice for developing workflow automation systems where users can design and visualise processes.
• Mind Mapping and Brainstorming: The drag-and-drop capabilities of React Flow make it ideal for building mind mapping and brainstorming applications.

Curious to know how to integrate?

Follow these simple steps to integrate:

For this set-up, please ensure you have node.js and npm, or yarn installed already. The React Flow package is published under reactflow on npm and installable via:

npm install reactflow

Now you can import the React Flow component and the styles in your application:

import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';

First ReactFlow App (Hello World!):

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 { useState, useCallback } from 'react';
import ReactFlow, { Controls, Background, applyNodeChanges, applyEdgeChanges } from 'reactflow';
import 'reactflow/dist/style.css';


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


const initialEdges = [{ id: '1-2', source: '1', target: '2', label: 'to the', type: 'step' }];


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


  const onNodesChange = useCallback(
 (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
 []
  );
  const onEdgesChange = useCallback(
 (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
 []
  );


  return (
 <div style={{ height: '100%' }}>
   <ReactFlow
     nodes={nodes}
     onNodesChange={onNodesChange}
     edges={edges}
     onEdgesChange={onEdgesChange}
   >
     <Background />
     <Controls />
   </ReactFlow>
 </div>
  );
}


export default Flow;

Case Study:

React Flow supports rendering nested graphs and grouping of nodes, in our case study we came up with the problem called User Journey

In our case, there were multiple activities which were inter connected and we were doubtful on how to draw a clear picture around it.

• How many mails sent to user
• What will happen if mail not sent to user
• What you want to do if user open the mail
• What you want to do if user didn’t open the mail
• How many user clicked in mail

If you want to resolve such problems graphically then ReactFlow is the solution. With the help of ReactFlow you can customise everything and design like the flow graph.

In User journey, we wanted to integrate multiple activities (Custom Node, Mail, Notification, Whatsapp, SMS, Google etc) and each activity has a set of custom configuration with custom set of handles (Sent, Clicked, Not Clicked, Not Sent, Opened) which you can say action and we can set the priority/order of each activity.

We can set the sequence of each activity and set

Multiple types of activity:

• Notification
• Mail
• SMS
• Whatsapp
• Google

Notification: Notification is a kind of activity, with the help of user journey, we configure notification activity and set the template of each notification activity and also configure the further action i,e we can configure the multiple action/handle. I.e. Sent, NotSent, Opened, NotOpened, Clicked, NotClicked, OpenButNotClicked.

We can add the individual action on each action like if notification successfully sent then after that mail will be triggered and so on.

Mail: Mail is another kind of activity, with the help of user journey, we configure mail activity and set the template of each mail activity and also configure the further action i,e we can configure the multiple action/handle. We can set the sender details, template details, amp details and so on and also we can set other actions/handles. I.e. Sent, NotSent, Opened, NotOpened, Clicked, NotClicked, OpenButNotClicked.

SMS: Mail is another kind of activity, SMS activity and set the template of each SMS activity and also configure the further action i,e we can configure the multiple action/handle. We can set the sender details, template details and so on and also we can set other actions/handles. I.e. Sent, NotSent, Opened, NotOpened, Clicked, NotClicked, OpenButNotClicked.

We have integrated these libraries into multiple applications already.

Journey (CCS)- Designed By Muskan

File Platform (Service)

Conclusion

React Flow transcends the realm of traditional web development, offering a canvas for creativity and functionality. With its modular components, drag-and-drop capabilities, and customisation options, it empowers developers to craft interactive visualisations that communicate complex concepts with ease. Whether you’re building project management tools, data visualisation platforms, or workflow management systems, React Flow presents an opportunity to elevate your application’s user experience by incorporating dynamic and visually engaging content. Embrace the power of React Flow and embark on a journey of creating applications that seamlessly blend form and function.

Resource:

https://reactflow.dev/docs/quickstart/