DEV Community

Cover image for Make interactive node-based graphs with React Flow. 📈

Make interactive node-based graphs with React Flow. 📈

Vaibhav Khulbe on June 05, 2020

Recently I was browsing some React libraries I need to work on. My criteria for selection was to find new and not so many famous ones but they shou...
Collapse
 
shailendrak1245 profile image
Shailendra •

Great tutorial ! My question is how to add logic to our nodes like api calls node,
if-else nodes, show message, send some message to whatsapp.
Because I want to build message automation app
Pls help :)

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

Hello! Thanks for reading.

I am not active here for quite some time and haven’t used this library much, so I can't answer your question.

Please look at their docs, support, or community (if any). I hope you understand. Thanks!

Collapse
 
saiprasad1996 profile image
Sai Prasad •

Great library! Been playing with it for a while. How do we save and restore custom nodes? Any ideas?
Saving and restoring plain default nodes work. Ref - reactflow.dev/examples/save-and-re...

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

I don’t know much about saving and restoring custom nodes for this. Maybe you can start a new issue in its repo?

Collapse
 
saiprasad1996 profile image
Sai Prasad •

Thanks Vaibhav for your quick response. I've figured out the way to achieve the functionality. FYI, you can create custom nodes and register the names with ReactFlow component and use the same name as the node type to be able to save and restore custom components. You can refer this link to get a clearer picture of what I was talking about - reactflow.dev/examples/custom-node/
Look out for ColorSelectorNode.js and setElements() function usage

Thread Thread
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

Nice, thanks for sharing!

Collapse
 
jonathanfishner profile image
Jonathan Fishner •

Great post! 🎉 I’ve also been working with React Flow, and it’s been a game-changer for building interactive node-based graphs. If anyone is interested in seeing another use case, check out ChartDB (github.com/chartdb/chartdb) - we implemented React Flow to visualize database schemas in a unique way. Would love to hear your thoughts and feedback! 🚀

Collapse
 
sskanishk profile image
Kanish Malviya •

How to avoid overlapping of edges (connection lines) and it's label?

Collapse
 
archdj profile image
Arch DJ •

This looks great. Which library do you prefer for automatic node positioning?

Collapse
 
adhemukhlis profile image
Mukhlis Adhe Purwanto •

actually for automatic position requires the dagre library from npm, for details you can see in the documentation reactflow.dev/examples/layouting/

sorry for my bad english

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

Thanks for sharing!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

Thanks! As for the automatic node positioning I haven't used any such library.

Collapse
 
medaminefh profile image
Mohamed Amine Fh •

Hey, Nice Article, Keep it up.
Do you anyone have an idea how to use this library on drag and drop imgs (Not just text) ?
Thanks

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

Thanks for reading!

Not sure of the image support but you can read here that:

Drag and Drop sidebar handling is not built in but can be implemented with the native HTML Drag and Drop API

Collapse
 
psnehanshu profile image
Snehanshu Phukon • • Edited

The edges overlap all-over, not a great experience.

Collapse
 
abhishek_chougule_2159eef profile image
Abhishek Chougule •

Can we create custom style node? i have created the node design want to apply as a node but in object how can reaturn? pls guide me
Thanks in Advance

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe •

Please take a look at this comment. Thanks!