Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

54
Views
Using React Flow Dynamically

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.

7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

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/

7 months ago · Juan Pablo Isaza Report

0

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/

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs