Видео

I struggled a lot to try to implement a grouping node but your video helped me so much and I watched all of it to help implement some other cool things you talked about too!! again thank you so much you explain things so clearly i am so grateful☺

Another tip I discovered recently: The React Compiler! I enabled it for all my custom nodes and it significantly improved perf for large workflows. Dragging was janky and is now pretty smooth! I thought my nodes were optimised but apparently not. In addition I've been able to use startTransition() to improve perf in other areas by "asynchronously" updating "non crucial" state.

good!

How to add a function to return to the previous step

Hi Usman, nice content! keep up the good work. Can you make a video to show how to resolve overlapping edges? my use case: we are loading a nodes and edges details from the DB (what are the nodes and what connect to what) and then render it on ReactFlow, with this we are facing an issues where the edges are overlapping nodes and not resulting in a hierarchical view. This is to illustrate a flow chart with 20+ nodes which are inter-connected.

That was great, sometimes it got confusion to understand as the app grows during develop but is was great next please make it simple video to understand each every section

Can you implement this - Firstly it shows few rows & once My vertical scroll bar should reach at the bottom then it should load some more data & my scrollbar should shift upwards to give me more scrolling ... Again i reach at the bottom again my scrollbar shifts upward and load more data . Please implement this❤

Great tips, thanks man 👍 I would also suggest to check your custom drag handlers (if you have any). If for example you perform any update on nodes state while dragging (eg calling setNodes) this will result in terrible performance.

Incredible tutorial. My company is asking us to add rich text editing to our component library and we decided that the granularity of control that Slate offers made it a perfect fix. I was having trouble grasping how to incorporate it from the documentation, so this tutorial was a tremendous help. Thanks for the time and effort you put into this!

How can change the color of the slot when hovered and show time of it in it?

nice, wow content

You should do a tanstack start with tans tack form video

Never thought we can do so much with react flow. Thank you Do you plan other tutorial on react flow like this in the future ?

Such clear logic !! well done brother , thanks

tanstack form is promising

Thanks this works..

Wow, I've always used axios interceptor and some logic that mimics the task queue that kinda stores requests made after the token was expired but once the token has been refreshed, all the requests in the task queue get executed with the new token in the request header.

Thanks a lot for the top notch content. The concepts you explained in this tutorial are crystal clear. I have one issue with the ImageNode, when I save the content I which is generated by `$generateHtmlFromNodes` I can see the image node but cant load the ImageNode(Decorator Node) using the CustomOnChangePlugin, The ImageNode gets dropped while I call `$generateNodesFromDOM`. Any idea how I can resolve it? TIA

Hi Usman Thanks to make me discover this Tanstack Form I recently discover React Drag And Drop (dnd-kit) . I find only small tutorial like this one ruclips.net/video/dL5SOdgMbRY/видео.html but I didn't find a complete tutorial like you've made on react flow. I wonder if you can make a tutorial on dnd kit I m not the only one interested in dnd kit since the small tutorial i've mentioned above make 56000 views

Thank you.

Really appreciate this tutorial, as an experienced dev that just wants to see an implementation of popular features

Looks worse... congrats

please make a course on motion

Hi Usman Abdur Rehman, I just rewatched this video for the second time, and I wanted to say thank you for all the amazing content you create. Your tutorials on the Lexical editor are hands down the best out there! They’re so much clearer and more detailed than the official docs and channels. I really appreciate all the effort you put into these videos. You definitely deserve to hit 1 million subscribers soon - keep up the great work!

Thats very nice video.. but i have a question i want to do like if the text is right aligned then the right align icon should be activated .. i tried to do it but did not work. so is there any way ?

Very useful video. It take me a while when researching until I watched your video, It saves me a lot of time. Thanks for your contribution. Keep going

Hi sir .Is the else block of pushing the mutation and query into processfailedqueue needed? because it was false it went in and we again make it false .it will never make it to else block right?

thanks Usman for sharing helpful tutorials please can you add full video about Payload cms and Nextjs ?

Thank you so much for another great tutorial! p.s. can't wait for lexical advanced part 2 :D

Hi, Thank you for great video. I had learnt to apply reactflow in my project from you first time. Now I need little help. You can give some solution. I am using custom nodes and each node I am receiving real time data through socket. These custom nodes are called in parent component (named as Dashboard) and decoreatet based on stored nodes and edges. I would like to change edge connection line color based real time data. If this connection ends, that connection comes from that node should be red, otherwise it should be green. If it is possible, I can share my whole project code with you over mail.

Hi Usman , thanks for this amazing project , how we can update the points when we apply transform on the custom shapes ?

Hi Can you please make table lazy loading with multi sort and multi filters with key and value of string or string [] and also how to add column level filters and outside table filters and column resizing and row reordering drag/drop in this same project

Hi i am facing a big problem in my table can we connect and discuss it? Can you hop on a google meet or something?

Why did you create both postId and postId.lazy? Why can't you do everything in just one file, for example, only with the .lazy suffix?

Is this course useful for drag and drop feature.. or any other suggested libraries to look after

Great Explanation Usman thanks for this content , i dont know why we have to re-render when drawing on the canvas using mouse move ? there is any way to avoid that since we are not updating the DOM ? does Konva see each shape a dom node ?

Hey I want to edit functionality you have any videos in tables more features or can you share me code or youtube link?

❤❤❤❤❤ It's super fantastic 😻🎉🎉🎉🎉🎉 Can I store in mongodb and call api to do that

Great course I just subscribe to your channel I wonder if it's possible to control the user choice after it submit his choice with react flow . For example if a user make links between payment initiated and usa and also uk. Is it possible after clicking the submit button to color the uk in red to indicate that he can't chose uk

Godly framework walkthrough!!!

Very nice video thanks sir. This video is big help👍🏻👍🏻

Hi bro i next video can you built some nodes like tree like structure where each child node has a handle and each parent node can be expanded and collapsed like this and how will you handle edges visibility in collapsed mode stuffs like . Please it will be very helpful

This video was exactly what I need. Thank you!

nice content... always loved your short tutorials for starting any new things

Thank you

thank you for the high-quality tutorial! I'm also eagerly waiting for the next advanced tutorial on Lexical, especially for integrating link functionality. can't wait to see how it's done!

aweeeeesome!!!! thank youuuu so, so much!

Amazing video. Thanks!

Hey i have done this but when I am adding image so it is showing me error that Richtextplugin is not inported properly

To those watching this tutorial, you might get into some errors with vite, , while setting up chakra ui, so do watch a tutorial on that, plus 'reactflow' is known as xyflow/react, so do take care of these things, before following ahead.