I'm new to React and was wondering if anyone had experience in using the React Flow library dynamically? As far as I can tell, the main way of using this library is to create a static .tsx
file in the src/components/
directory.
I would like to use a JSON entry from my MongoDB and dynamically create a flow chart based on certain flags/values within React. If this is possible with React Flow, I'd appreciate a link or help! Thanks in advance.
That's absolutely possible.
As you can see in this example, node and edges are expressed as JSON: https://reactflow.dev/examples/edges/
You can modify the elements
array at any time and add furhter elements by just adding simple JSON nodes.
On top of that you can autolayout your diagram: https://reactflow.dev/examples/layouting/
Check out the save and restore docs. You can save (or build your own) JSON representation of a workflow, then restore it as needed. https://reactflow.dev/docs/examples/interaction/save-and-restore/