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.

https://codesandbox.io/s/react-flow-colored-node-map-8ctyt

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.

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.

Follow on:

Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.