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.
Node Shapes
https://codesandbox.io/s/react-flow-node-shapes-k47gz
This project shows how you can create different shaped nodes such as circles, squares & triangles.
Node Fields
https://codesandbox.io/s/react-flow-node-fields-rqf2q
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.
Add Node Button with Auto Positioning
https://codesandbox.io/s/react-flow-add-node-button-l9rcu
A simple example that shows how you can automate graph resizing when the window resizes.
Colored Minimap Nodes & Custom Control Button
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.
Node Popovers & Tooltips
https://codesandbox.io/s/react-flow-popovers-fzzrh
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.
Randomizing Positions & Toggling Draggable Nodes
https://codesandbox.io/s/react-flow-disable-drag-random-positions-wh082
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.
Dynamic Handle Counts
https://codesandbox.io/s/react-flow-dynamic-handle-count-2is9m
This nifty example lets you change a nodes handle configuration on the fly.
SVG Filter Generator
https://codesandbox.io/s/v0l0j
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.
Subflows – Flows Inside Nodes
https://codesandbox.io/s/szcsn
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.
Window Resizing
https://codesandbox.io/s/7hsd6
A simple example that shows how you can automate graph resizing when the window resizes.
I am a founder & CEO of Code Atlantic and I've been working with WordPress for over 15 years creating plugins to help WP site owners grow for more than 10 of those. We have developed and maintained popular plugins including the best wordpress popup plugin, Popup Maker with over 4k 5 star reviews, as well as Content Control, Ahoy & User Menus.
how to add logic to our node , like from field and if else condition with drag and drop
I’m not sure if your familiar with WordPress’s Gutenberg project, but they use React Portals for the side bar (called Inspector).
I used a similar concept and have something like this:
Editor
Nodes
Node
NodeInspectorFill
Input for node option (will appear in the NodeInspectorSlot)
Sidebar
NodeInspectorSlot (portal, shows NodeInspectorFill controls for the currently selected node only)
As for conditional logic for nodes, I’d need more info on what you mean.