Create Custom Right Click Menu using ReactJS | Ant Design Dropdown Context Menu Tutorial

hello guys welcome back in this video tutorial we will learn the context menu using react.js and and design components so that when you right click on those components we show the context menu and user can select those options and we can perform those actions accordingly so let's get started I have an empty react.js project that is using and design and right now it's showing nothing so let's go ahead and add some ref GS components on which we can add the context menu so let's start from div and give it a style so that its visible on the right side so we can say width maybe 200 pixels and height also 200 pixels let's give a background colors height background color to be maybe you can say light and gray and let's give it a porter as well so one pixel maybe dashed and red save it here you go and here we can write click me okay so when we right click on this so instead of showing this contrast menu we will be showing our own drop down context menu so for that we will be importing the drop down component from end design and wrapping this div inside that so it will be drop down cut it from here and paste it here and to show the drop down we will be using the overlay prop and inside that we can return any left component so that will be shown when we right click here so ah to start with let's add a P tag we can say this is ah context menu right and there is other prop that is called trigger and it where we tell that how to trigger this one so either on the click or on the context menu or on the hover because we are going to show that on the right click so we will be choosing context menu save it and if I right click here so it is showing whatever we have returning here so this is a context menu right so instead of this one we can return a whole menu so let's declare a menu so it will be again a menu component from end design I have a Separated video on that how to use the menu component so I will add its Link in the I Button as well as in the description description below so you can take a look so here we will be returning a menu and inside the menu we will be providing the the items that we want to show so in each atom we need to provide the label so suppose we want to say copy and then a key let's save it and instead of this one the P tag we can return this menu right save it and now if I right click on that it shows our menu only one option is there right now so let's add few more options copy and paste it few more times so maybe we can say share and share and maybe we can say reload reload maybe delete delete right save it and if you now right click it shows all of this we can add the icons here as well so let's add so there will be an icon and we can say copy outlined and it is again from the end zone icons right I have a separate video on how to use the end user icons I will add its Link in I Button as well as in description below so you can take a look okay so this is the copy icon and here we can say the share outlined and here we can say reload outlined and here we can see delete outlined right save it here you go the icon has been appearing and even we can make this ah danger so that it looks in red color here you go right and even instead of the first level menu we can make it at the second level third level as well so for that we need to provide the children and that will again be similar to the items we are we have we have added in in the main menu so we can add maybe three atoms so in the share maybe we can say on Facebook maybe you can say FB and Facebook field and maybe we can say Twitter and maybe even Twitter fill and maybe you can say Instagram and Instagram and Instagram filled save it you go if you now right click and share Facebook Twitter and Instagram right so now what it is doing is we are I am doing the right click it shows the context menu there and from here we can select any of these and and we can act upon that accordingly right so whenever a user will will be clicking on any of these items we will be getting that here in the menu or the on click and it will be giving us the key on which user has clicked so for now we can console it to see you you clicked on key right and the key here is copy share FB Twitter Instagram reload and delete right if I save it and inspect and show the console and then now right click and if you click on the copy you clicked on the copy and in the shade you clicked on the FB you clicked on Instagram and you clicked on delete you click on reload right so here ah based on what user has clicked we can do whatever we want accordingly right so similarly we can add this context menu on any of the components so here we added on the div we can add that on on on the simple P tags as well so maybe we can say P tag click me and copy this drop down and close that here okay so it is the click me if I right click here it will show the same menu right and instead of the right click if you want that on it should appear on the hover or on the click we can do that as well so instead of the context menu maybe we can say on Hover and now if I hover on it it shows the this menu and if I say on click then it will show only when I click on that right so this is how we add the context menu or the menu when we right click on any component so what we need to do is we need to encapsulate that particular component inside the drop down and in the overlap we need to return what we need to one what need to be shown when this drop down is appearing and in the trigger we can say when to show this drop down or the context menu right so that's it on exploring the context menu or the right click menu but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 5,653

Keywords: reactjs, antd react tutorial, antd, ant design, Create Custom Right Click Menu using ReactJS, Ant Design Dropdown Context Menu Tutorial, context menu react, react js context menu, context menu antd react, right click menu in react, custom right click menu react, antd icons in right click menu, nested right click menu, nested context menu react js, custom right click menu, right click menu javascript, codewithaamir, menu on hover react, menu on click react, menu contextmenu react

Id: TyDNcNnyO44

Length: 8min 35sec (515 seconds)

Published: Tue Oct 11 2022