Click Outside to Close - React Hook

hi guys welcome back to channel in the last video we built a drop down menu using react if you like this you can check it out right here you still look good but there's one problem to close the menu there's only way is clicking the trigger button again which is not great use of spirit the thing I need today when we click anywhere else outside the menu it will be closed fortunately in react we have some hook to make it work correctly so today I will show you how to close the drop down menu when you click outside of this using react hook for anyone who first come to my channel you can find out some interesting mini coding projects like creating a spy animation in JavaScript the repulsive sidebar menu in HTML CSS and JavaScript the personal portfolio website in dark and light mode all these things are proud in the playlist coding with me make sure you like And subscribe my channel so you don't miss any of my video in the future let me help you with a quick guide if you haven't watched my previous video in app.js we got a component up and it has the open stay is phones or two and then we have this active Mouse is our trigger button and the menu so here's our button if you click on it it toggle the open state is opposite value and then if the open state is true it will add the active to drop down menu class name or the inactive if the open stays set to phones in index.census I'll make some animation for it to look smooth so we get this nice animation okay now what we want to do is using a hook called use effect to toggle this open state to phones when the user click outside menu so what is use effect the use effect hook allows you to perform side effects in your component some sample of side effects are fetching data directly updating the Dom and Thomas first of all we need to import use effect from react the use effect had two arguments but the second argument is optional inside of it our listens for the mouse down event and when this event happened our set dolphins stay to phones okay so I clicked the button and show the menu and then I come over here click outside menu the open state gets set to phones the menu disappears seems like it works right but there's still one problem if I open the menu then click an item inside of it well the menu is closed so this were the concept of clicking outside comes into play we only want our effect is set the open state to phones when we click outside drop down menu element backed our app.js we can easily deal with it using the event and we can say if the event Target which is what a click actually happened is not inside of the menu then we set open state to phones but how can we know when the user clicks outside the menu in react there's another hook help you to solve this problem use ref every time you use a hook in react you have to import it and Define new variable menu ref let's come over to our menu and add a ref Eco menu ref okay so now we need to detect the event click outside the menu and we're gonna use our menu ref.current contains event Target for the menu rep dot current return our menu container component because I put a ref equal menu ref right here and a contains method return to if the event dot targets is inside the menu ref and return phones if not but I want to reverse the logic right here using logical not operators which means whenever I click outside the menu I set the open state to phones alright let's see what this look like I click on the trigger button to show the menu then I click outside and it closes but if I show the menu and start clicking the item inside of it it doesn't close and now I click this trigger button again well the menu closes basically the problem is solved but stay tuned we have to clean up the event listener so you can do this by returning a function that runs when the components renders and here run to document remove event listeners the mouse down event and remove Handler function alright let's double check and make sure this still works I click on that then click the outside click on that and click the menu item finally click the trigger button to toggle it back to close I think we came up with here is pretty nice as you can see we'll just see react hook and some basic style we can create a nice looking drop down menu not only does we now have some react hook thus we can reuse in on Cut different ways this video is sober and again if you like this video please hit the Subscribe button and give me a thumb up that will inspire me a lot thank you guys for watching and see ya

Channel: TK

Views: 50,232

Keywords:

Id: HfZ7pdhS43s

Length: 6min 36sec (396 seconds)

Published: Sat Aug 06 2022