This React Library Blew My Mind - React Flow Course in 30 minutes 

Thanks man. You made my day 🤠

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..

Thanks man. You made my day :D

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.

Also I published an Advanced Course for React Flow a week ago so if you want to learn some advanced React Flow stuff, you can watch that.

Thanks man. Your comments are what keep me going 😭

Thanks a lot man. You made my day with this comment 😭.

Thanks for the comment man :)

Thanks for the kind words Talha. :)

Thanks for the comment 🤠

Thanks a lot :)

Thanks :)

Thanks man :)

Thanks for the comment :)

Thanks for the comment man. Appreciate it :)

Thanks a lot for this appreciation :)

Thanks :'D. Took around 2 weeks for learning library + project + script for the video etc.

@@usmanabdurehman97 That's amazing!! Thanks for the video.

Thanks for the comment man

Thanks man for the comment :)

Thanks for the comment Thong :)

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.

I will sore sure include it in the next course. Thanks for the recommendation.

@@usmanabdurehman97 just answer his question

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.

Btw I know I can use it statement before the addEdge function but I just want to know if there's a better way

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 Thanks man I'll try that

Thanks man :)

Thanks man :D

@@usmanabdurehman97 bro i have a doubt in react flow could you give your discord /twitter..? I think you can clear it. Yiu seem to be expert in it

Not an expert but thanks. You can join the discord and share the issue there. Link is in the description

@@usmanabdurehman97 🙏🙏

Thanks man. Means a lot :)

Thanks for leaving this comment :)

This is a dummy workflow so there is not real logic behind it.

@@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

I am planning a video regarding its usage in a real project based on its implementations I have seen. It would be out within 1,2 weeks.

Thanks for the comment :)

Have you tried giving a very big zIndex to that particular node you want on top?

I dont think it would need something special to hook react flow with Electron. Have you tried doing it?

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.

Can you share an example of what you want to do? If you have a discord, you can join the discord server and share whatever you are planning on doing.

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.

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

yeah, looping is not great. Use Zustand then and keep a global object for node data

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.

This is a free library.

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

Thanks for the appreciation. Can you elaborate it a bit on what you mean? I didn't get it.

@@usmanabdurehman97 i mean that create node about browser such as "click", "typetext", "openur", "newtab"...

For sure. This is an amazing library, and I would love to make more project-based tutorials using it. Be on the lookout for more in 1-2 months.

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

xd. You mean Sam Altman?

cool. Will add this in the advanced course I will make. Thanks for the comment

I am building a project demo, if you like we can collaborate, I can provide a real-world use case, that we are open to make open-source.

Is this a compliment or a roast because I am not quite sure :3

@@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. 🫡

oh cool. Thanks. I took inspiration about the project from the demos page they have. A lot of people have built very complex stuff using react-flow.