React Flow Example Resources
I didn’t find much listed outside of the documented examples so during my hunt for things I noted all the cool examples I found in the wild below.
You can find recent examples here.
This project shows how you can create different shaped nodes such as circles, squares & triangles.
Each node has custom fields that appear in a sidebar/toolbar/panel when actively selected.
It also includes a “Deploy” method that outputs a dynamic representation of the node graph.
A simple example that shows how you can automate graph resizing when the window resizes.
This one is mostly boilerplate but the inclusion of matching colorized nodes on the minimap and adding custom buttons to the map control bar put it on the list.
You have to dig in to the code to see it as the project the tooltips commented out but they work pretty well out of the box there.
This one offers a few cool features including some buttons to randomize the node layout, reset the viewport transform as well as making nodes that can be draggable on demand.
This nifty example lets you change a nodes handle configuration on the fly.
Here you can see that as you add “Filters” and chain them to the “Result” node, the output code changes in the textarea field. It includes custom nodes for each filter, node meta as well as actual usage of the node graph as you build it.
This one took me by surprise, once I saw it, the simplicity of it was pretty awesome. It uses the “Contextual Zoom” effect to have nodes that as you zoom in reveal their own subflow graph that can be managed within that context.
Go ahead and try it, zoom in on Node 2 below.
Daniel Iser is a professional WordPress plugin developer, and the author of plugins such as Easy Modal & Popup Maker. Founder of Wizard Internet Solutions he has been working with WordPress for over 7 years creating websites and tools for clients & blog authors.