Very straight forward and to the point, well done. I'm always on edge when I see unedited code videos as more often than not the people doing those are yapping too much about nothing, are struggling to get it to work or is unsure what they are going to build exactly, which as a viewer can be a frustrating watch. However you did the exact opposite and for that I'm grateful. I don't often like videos, but I feel like I have to in this case. Well done.
just one suggestion by the way.. it would make the viewers more comfortable to have code on one side and the rendered output on other side on the same screen simultaneously..
Nice Suggestion. I can either have just the code editor or browser open at one time so that everything appears big and people can view it on mobile which I think people do or have the browser and code editor side by side. Idk. Maybe I can do a poll to ask people what they prefer. Still thanks for the suggestion. I will consider this for future videos.
Great video, show the drag and drop and how csn we save them, also i was bit confused with you were importing components, like how do we know what it is used for? . Great video by the way,thanks!
Thanks for the comment. You can just save the json state in the db or local storage depending on if you app has a backend or not and then load it whenever the app opens. Regarding the workflow, I had a dummy idea for a workflow where we would enter a payment(initialize) with some amount like 300$, then select any particular country(currency) and then select a particular payment provider by connecting different edges with each other. You can then use the state to add whatever logic you want.
It would be great to see how you would go about serializing the graph and loading it again later. For example for saving and sharing workflows with your team mates
Thanks for tutorial video. This is great. I have some visual issue of custom edge. Close icon doesn't appear on edgeline. What can couse this issue? If you have solution, please share with.
The cross icon is positioned based on some coordinates we get from react flow. For a curved edge, for some instances it can happen that the cross icon wont be present on the edge. You can make a normal edge instead of a curved one and probably that would not happen. The straight line custom edge example is present in the react flow docs.
I have a question Is there a way to get a rule to control how the edges are connected? For instance I want users to create a flow that should start with "signup - select_country - some_other_nodes...... - payment" here I want to see a rule that the payment node should not be connected directly to the signup node for example since payment node should be the last
You can use the isValidConnection method in the Reactflow component for that. In that method you get the current connection info and using that you can not make the connection if the source lets say is not your intended node(like signup).
@@usmanabdurehman97 yes, i can see that, but can you make or refer videos about using this in real-projects for.eg, a simple payment app like your dummy example but actual working, like what how and what happens in background when we connect these nodes and then initiate a payment. and save the workflow retrieve them, then use it. liek that
You can use some global state management tool like Zustand to update/keep track of the data between nodes/edges etc. That is whats recommended by React Flow as well.
For this particular example, I have a working area of 500*500. So, I am using Math.random() * 500 to generate x,y coordinates for the nodes I am adding so that they land inside this working area.
Glad you liked it :). Yes there is. Since you have the ability to add a custom handle, you can use css clip path to make whatever kind of shape you want for the handle. Also, you can use some image as background for the handle etc.
But one thing i dont get how to pass data from Node 1 to Node 2? I dont see this done thru Edges, so when onConnect is done do i need to loop over Node 1 to get its props and then Loop over Node2 to pass there?
You can use any way. You can do what you told where you in the onConnect function mutate the state for the node to pass custom data to it which can be the data of some node as well. You can also use some state management library like zustand and keep a global state tree where the key of the state is the id of the node and the value is the respective data. Then you can use that state in any custom node component. Do anything which makes more sense to you based on your needs.
@@usmanabdurehman97 using zustand works greats its just the looping part over and over i dont really like i was hoping that this lib has some magic function that stores values nicely that they can be referenced by id easally without loop but i guess i can always build this myself
sir would love to have a video on Layouting in react flow and how to insert json data into it. Like my data have a key as steps and inside there are sub-objects in same . Imagine gettting answer from gemini api asking to give steps in json format to create any project.
Aoa Tabish. You can look at ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-05PBW_k2Nno.html for how you can do dynamic layout based on data. Also look at the way I create nodes and edges dynamically based on a schema. Maybe it is similar to your problem. Regards.
It should work. In the payment country component, I have got two handles. One source and one destination. Check if you are getting any errors in the console. Also cross-check your implementation with mine
@@usmanabdurehman97 yes sir i do that but the issue is when I add one target and two sources then target and one source is working and second source is not working can you please guide me regarding that or we can connect on google meet if possible
You will have to save the json object of the nodes/edges in a database/localStorage and load them on next page load or something depending on your application. I will include this in the next react flow course I make
@@usmanabdurehman97 thanks , i was able to do that actually , it was for test of a job . could not complete at time 😓. dicovered ur channel though , waiting for react flow course👍👍
@@navaneeth9103 Hi Naveen. I have published the Advanced React Flow Course. You can check it out here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rk_WSjrmHp8.html
@@usmanabdurehman97 nah bro, I'm just appreciating how well you coded in just 30 mints but where you learnt this much because it's hard to go so much deep just by reading docs. 🫡