Custom Right Click Menu (Context Menu) With React js, Next js and Tailwind CSS

in this video I'm going to show you how you can change the default right click menu of your browser to a custom right click menu and it is in fact too easy we are using nextjs and T in this tutorial let me show you what is the output of this tutorial so this is the page that I want to use it in this tutorial and if I right click everywhere for example here you can see that this is the default right click menu of my browser but inside of this text area if I right click I have have this beautiful custom right click or context menu so this is it and I want to show you that how you can implement this functionality inside of your website and for this tutorial I'm going to use this project and you can download this project from this GitHub repository the link of it would be in the video description and you can download it and come with me after downloading this project you need to install the required libraries so you need to go to view terminal and here you need to type npmi or npm install but I already use this command and you can see that I have no modu so uh after this you can use npm run Dev to open our project on Local Host well this is my project so I created a new menu for this project which is a context menu so let's go here in the singular menu on the context menu let's click on this and and we will go to uh local hostport 3000 singular SL context menu so this is the page I want to work on it so let's go to the code and start let's close the terminal we don't need it for now so uh we can go to app in singular in context menu in page.js this is the page that I want to use it in this tutorial and I already created it so let's go to the components folder and inside of this component I must create a new folder so I create a new folder with name of context menu and inside of this I want to create my component so let's click this icon and create a new component name context menu.js and press enter so this is our new component now let's create it so I use rce and this is my new component so instead of react I just import the user set because I need it you will see that later and that's it this is our new component first let's see what do we have to receive as our props let me add some comments here for you so what do we need in this component first you need to receive an X and Y and this X and Y are the positions of uh our context menu you will see that soon then we need to receive an unclose context menu prop to call the close function on the parent of this menu then we need a parent refi we need the reference of our parent to close context menu when we click outside of this context menu and then we need to receive a children and we will show these children dynamically inside of our component so let's receive them I go here and I will D structure them directly here so I use X and Y and also I receive this on close context menu also I receive the uh parent ref and also I need children so this is it the first step is we need to render this children so inside of this Division I will render them that's it now let's use for my document okay this is my component and for this Division I want to have some class names to show it more beautiful so let's use some class names here I use a padding of two also I use the absolute and I use a great Z index and also I need to have a border and a border of gray of 300 and also I need to have a BG gray of 100 and I use the rounded of LG so it would be more beautiful let's format our document this is it and after this we need to change the position of this uh context menu on the top and on the left so we need to adjust it and because we using tailin CSS we don't use them dynamically inside of class name it's better to create them at some style so let's create it and here I create them con menu style and for this style I must have the top as something and also I need to have the left so for this I use this Dynamic uh value of y pixel and also let's copy this quickly and here let's use the x value so this is the style of this menu let's format the document so we use the top and this must be the the left so we change the top and the left of this division using this menu style and let's pass this to our component so after this class name I use the style of this menu style this is it so let's format the document where this is it this is the component we need to use the context menu and for now we have a with some class name and some Styles and also a children so this is it let's go and see how we can use it so we need to go to the page. js6 and here we need to create a new state so let's create it and you know that when we need to create a estate in nextjs we need to use a use client so let's use the client here to say to nextjs if you're a react developer you don't need this but if you're a nextjs developer you need to use this use client in appro nextjs applications so I need to create a new state and I use the context menu State and also I use set context menu equals to a user State and for this state I want to have an object and inside of this object I want to have three different values a show which is a Boolean with value of true or false with initial value of false and also I want to have an X and A Y so in this state of context menu we will save the show and X and Y that's it and also after that we need to have a reference so I will create a con of text area ref which is a use ref and this is it so after this let's create our text area so I will go here inside this uh line 14 and here I create my text area that's it and for the reference of it I will use this text area ref and also we need to have some class name for it so let's use the adding of two and also a border and a border of gray of 300 and also red of MD and V of full after this let's have the rows of let's say 15 for this component that's good and this is it so the next thing is we need to have the uh event of showing our menu so you know that we have unclick and some other options like unclick on change and a lot of events from our JavaScript so the event we are using here is on context menu so in this on context menu we need to receive the event and we can use console.log to see this event so let's go and see what do we have until now and I format the document so let's go and see what do we have well it seems that our US state is not defined because we need to import it and it is is not imported dynamically let's do this so here I will import the user State as well as use ref let's go and check it again well this is my text area and you can see this so let's inspect and go to the console and here if I right click you can see that I'm seeing this uh default uh right click menu but here you can see I an event and this event has client X client y control key and a lot of options and the name of it is on context menu this is it so let's go and use this and change this menu in our codes in order to manage the opening of our right click menu or our context menu instead of this console.log I will create a new uh function and I will use it here so I created open context menu Handler and I pass the event to it and let's go and create this this so here I will use this and I receive the event and this is so in first step I use e do prevent default then I want to use the page X and the page y of our event which is the exact location of our cursor so I use the structure all of them from the e or from the event and the name of them is the page X and also page y this is it and after this we can use them to set them into our context so what we can do this it's too easy we can use this Set uh context menu and we can pass an object to it so for the show we say it is true for no and also for the X we use page of X and for the Y we use page of Y so you know that when we click right click on our text area this action would be triggers and we call this so we will first use e. prent default and then we use page of X and page of Y let's log them to see them better so I use console.log both of these so let's copy this with this object so we see them as object let's use format documents so we will use set context menu of show us through and ex of EX of page and Y is Page y now we know that the show is true so let's go and uh try to render our context menu so here after this we can open a care to use JavaScript and you know that we have a context menu State inside that we have show so if the uh context menu but show equals to open we can simply show an H1 with context menu for no so let's use format document and test it so let's let's open our console and here if I right click you can see that uh we can log the page X and Page Y and if I right click everywhere you can see I have the new page X and Page Y and can we show the context menu yes the context menu is here but it must change to our Contex context menu component now you can see that we have access to X and Y let's go and use them so in this H1 we can render our component let's go and see what do we need in our component so we need to pass the X and Y and also unclose and the parent RI and the children so we need these parent RI and unclose context menu and here we have the reference to our text area which is its parent but we don't have a function to close our context menu so let's create it I will copy this quickly good idea to use copy paste in our components and our file so instead of open this time I want it to be close Handler so this would be con of close context menu Handler I don't need this let's delete and I don't need this and this I just need to uh go back to my initial value so I can simply copy this line and paste it here that's it let's delete this Extra Spaces let's format the document so in calling the close context menu Handler I just set my context menu to show to false X is zero and Y is zero that's it now we have the function and we can call this context menu component let's do this let's go and here in the uh line 32 instead of this H1 let's delete it and I call my context menu let's see do can we D dynamically import it yes that's good so and instead of this self closing tag we must use this because we need to pass some children to it so this is my context menu menu let's format the document good now this context menu must have some props let's pass them so what was the first one the first one was ex so for the ex you can use the context menu do X and this context menu is coming from this state that's it did and after this we have a y so for the Y we can use the context menu do y and after that we have this unclos menu context and for that we call the close context menu hand there so we are passing this function to our component and this function will close our context menu or our right click menu and after that we had a parent R and for this parent R we use this text area so let's copy this and use format document so what we have done we check that if the context menu. show is true we can return this context menu with X and Y and these and inside of that I just render this is my context menu so let's go and see what do we have until now well let's right click and this is it so you can see that everywhere you can right click and your context menu is shown so this is the console L we don't need it let's close so if I right click here you can see that I can see this and we have the page X and Page Y which is related to our current cursor position so this is showing and I think everything is good now uh how we can close this context menu so you can see that I'm clicking it is not closed but we have a closed Handler so how we can do this let's go and handle the close of this context menu and also we can close outside of this and it must be closed so for this we use that refi let's go and use that reference to see how we can do this so I'm passing the parent RI to this component and also I'm passing the unclosed context menu to context menu and we are receiving them here as our props let's use them so I have this user state but I think instead of user State I need use effect that's it and before that let me show you something so if you use this uh unclick and if you pass this unclose context menu you can close let's format document so if you use this command on click uh equals on close context menu you can close the context menu by clicking on the menu let me show you that quickly before continue so here if I click on the menu you can see that it is closed so I right click it would be open and if I click outside nothing happened but if I click on my menu with left click it would be closed but this is not what I want because I want to close it only when I click outside of this menu and I want to handle the clicking of this context menu inside of it but I'm showing you that you can do this if you want it so by clicking on it it's closed but I don't want this so let's go and change this functionality so because I don't need this functionality I comment this but you can use it let's use format document now I want to implement the functionality of clicking outside of this uh context menu so we are receiving the parent ref and let's go and do this so I here create a use effect and this is the structure of my use effect this is the dependency area and this is the return the K of functions so I need to have a listener function and I need to add it so uh to document so I use document do add event listener and for what event we need to use it I use the most down and for this mostone I use this listener so let's create a new function here so I create a con click listener and inside of this I will receive an event and I will do something so let's pass this event for now and this is it so after the unmounting of this component I want to remove this from the uh document so let's copy this quickly and inside of this return let's use document dot remove uh event listener from the Mone we remove this click listener so let's use format document so you can see that this is the basic structure of our react and this it what we need to do inside of this click listener well we are receiving this event and this event is coming from the mouse so we have the location of this mouse let's create our menu so our menu equals to our parent ref if equals that current or it's better to be the menu parent so after this we check that uh we need to check that if it is not exist so if it is not exist the menu parent or uh the parent do contains the event. target is false so in these situations we need to return else we call this un close context menu let's format our document and let's review what we have done so we created a new listener we create a new listener and inside of that we receive the event and we check that if if I'm clicking on the menu parent and I'm not on the event. target which is the current menu I will uh return else I will call onclose menu so let's check what we have done we need to call the unclos context menu just when we are not clicking on the menu itself and we are outside of the uh context menu and we are inside of the parent so we call that first we create the menu parent which is the parent ref. current because it's a used ref and then we check that if these conditions are true we return if the menu parent is not exist or if the menu parent not contains this event. target lse we call unclose context menu and this is it so I think everything is okay here let's go and test it so here let's write click it will open let's click on it it would not be closed let's close outside and it is closed so you can see that that my right click is working and it will open everywhere I want and if I left click outside of it it would be closed I think that's good and it's okay now I just want to show you how you can add Dynamic menu to your context menu let's go and do this I will go to page. jss and here this is the uh context menu children inside of that I want to have some items so in order to create them first I want to import some icons and let me show you you know that we previously installed the uh react icons package here so I can use react icon icons so I import some icons from this Library let's import them so I need to import MD opening browser and MD attach email and MD outline archive from react icons slmd that's it so you can use it then we need to create our items so let's minimize this ret and here let's create them so con menu items is an array and I created some objects for them previously so let me copy paste them here to be more quick and this is it so in this menu items the first one has the ID of zero with label of open and I use this icon for it and I have an unclick and I say unclick of this item just alert and open for me then I have another item with IDE of one and label of email and this icon and I use alert of email on clicking of this then I have another one with ID of two and label of archive and icon of MD outline archive and on click I use alert archive and you can use any other items you want so let's use the format document this is just an example let's go to the written and here instead of this is my context menu let's delete it and let's create a new division here and for this division let's have some class names like Flex and flex of column and also a gap of two that's it so inside of that I want to map over my menu items so I use menu items. map and I will receive some items and for each one I want to return a new Division and for this division you know that we need to use the key which is the item. ID and then I want to have some class names so let's add some class names to it like Flex and items of Center and a gap of Two and a curs of pointer and also on Hover I want it to have the text of blue of 600 this is it and let's have an unclick for it so I use the unclick and inside of that I just call the item do unclick and after this I can call the close context menu hand there so this is I can call it from here or from in inside of this context menu here it's up to you and based on your business logic you can use it so let's use the format document so this is a division inside of this items and for the children of this division what we can pass the first thing is I want to use the item. icon and after that I use a span and I use item. lab let's right click format document now let's test and see what do we have until now and here if I right click you can see that I have this open and email and archive and if I click on this open well alert will be open and then it will be closed and also for the email and for the archive so this is that you can see that our context is working and when we click outside of it it would be close and when you click on uh an item of our context menu it will works correctly and that was the tutorial that I wanted to show you I hope this video helps you have a good time and goodbye

Channel: Dev Empower

Views: 222

Keywords:

Id: QlLI1VnOQlI

Length: 24min 2sec (1442 seconds)

Published: Thu Feb 08 2024