Click Outside to Close - React Hook
Click Outside to Close - React Hook
Click Outside to Close - React Hook
#37 #dropdownmenu #react #tutorial #Click_Out_Side_to_Close
In the last video, we built a dropdown menu using React. It still looks good, but there is one problem. To close the menu, there is just the only way is clicking the trigger button again, which is not a great user experience. So in this episode, I will help you how to close the menu if we click outside of it, using React Hook
Check out my GitHub:
https://github.com/thekietvuong/Dropd…
Check out the dropdown menu - React tutorial right here:
1.Dropdown Menu - React Tutorial for Beginners
• Dropdown Menu - React Tutorial for Be…
2.Click Outside to Close - React Hook
** This video **
Download and install Node JS right here:
https://nodejs.org/en/
🎵Track: Good Days - Yung Logos
Youtube Library Audio
Content
0.24 -> hi guys welcome back to channel in the
3 -> last video we built a drop down menu
5.4 -> using react if you like this you can
8.22 -> check it out right here you still look
10.8 -> good but there's one problem to close
13.74 -> the menu there's only way is clicking
16.619 -> the trigger button again which is not
19.199 -> great use of spirit
20.88 -> the thing I need today when we click
23.22 -> anywhere else outside the menu it will
25.92 -> be closed fortunately in react we have
29.039 -> some hook to make it work correctly so
31.74 -> today I will show you how to close the
33.84 -> drop down menu when you click outside of
36.12 -> this using react hook for anyone who
39.42 -> first come to my channel you can find
41.399 -> out some interesting mini coding
43.559 -> projects like creating a spy animation
46.44 -> in JavaScript the repulsive sidebar menu
49.8 -> in HTML CSS and JavaScript the personal
53.82 -> portfolio website in dark and light mode
57.18 -> all these things are proud in the
59.28 -> playlist coding with me make sure you
61.859 -> like And subscribe my channel so you
63.719 -> don't miss any of my video in the future
65.42 -> let me help you with a quick guide if
68.58 -> you haven't watched my previous video in
71.22 -> app.js we got a component up and it has
75.54 -> the open stay is phones or two
79.2 -> and then we have this active Mouse is
82.38 -> our trigger button and the menu
85.74 -> so here's our button if you click on it
88.799 -> it toggle the open state is opposite
91.5 -> value
96.84 -> and then if the open state is true it
100.56 -> will add the active to drop down menu
102.78 -> class name or the inactive if the open
105.899 -> stays set to phones in index.census I'll
110.46 -> make some animation for it to look
112.259 -> smooth so we get this nice animation
116.899 -> okay now what we want to do is using a
120.659 -> hook called use effect to toggle this
123.899 -> open state to phones when the user click
127.02 -> outside menu so what is use effect the
130.619 -> use effect hook allows you to perform
133.319 -> side effects in your component some
135.78 -> sample of side effects are fetching data
139.08 -> directly updating the Dom and Thomas
142.879 -> first of all we need to import use
145.44 -> effect from react
149.52 -> the use effect had two arguments but the
152.76 -> second argument is optional
158.16 -> inside of it our listens for the mouse
160.62 -> down event and when this event happened
163.08 -> our set dolphins stay to phones okay so
167.34 -> I clicked the button and show the menu
169.44 -> and then I come over here click outside
172.56 -> menu the open state gets set to phones
175.8 -> the menu disappears seems like it works
178.92 -> right but there's still one problem if I
182.22 -> open the menu then click an item inside
184.98 -> of it well the menu is closed so this
188.879 -> were the concept of clicking outside
190.7 -> comes into play we only want our effect
194.159 -> is set the open state to phones when we
197.159 -> click outside drop down menu element
200.599 -> backed our app.js we can easily deal
203.819 -> with it using the event and we can say
207.18 -> if the event Target which is what a
210.18 -> click actually happened is not inside of
212.879 -> the menu then we set open state to
215.94 -> phones but how can we know when the user
218.879 -> clicks outside the menu
220.92 -> in react there's another hook help you
223.92 -> to solve this problem use ref
226.98 -> every time you use a hook in react you
230.28 -> have to import it and Define new
232.379 -> variable menu ref
234.9 -> let's come over to our menu and add a
238.2 -> ref Eco menu ref
241.2 -> okay so now we need to detect the event
243.959 -> click outside the menu and we're gonna
246.959 -> use our menu
248.72 -> ref.current contains event Target for
253.14 -> the menu rep dot current return our menu
256.199 -> container component
268.68 -> because I put a ref equal menu ref right
272.699 -> here
274.199 -> and a contains method return to if the
278.52 -> event dot targets is inside the menu ref
281.759 -> and return phones if not
285.06 -> but I want to reverse the logic right
287.699 -> here using logical not operators which
292.02 -> means whenever I click outside the menu
294.66 -> I set the open state to phones
299.6 -> alright let's see what this look like I
303 -> click on the trigger button to show the
305.46 -> menu then I click outside and it closes
309.419 -> but if I show the menu and start
312.06 -> clicking the item inside of it it
315.06 -> doesn't close and now I click this
317.699 -> trigger button again well the menu
320.759 -> closes basically the problem is solved
324.479 -> but stay tuned we have to clean up the
327 -> event listener so you can do this by
329.46 -> returning a function that runs when the
332.34 -> components renders and here run to
335.4 -> document remove event listeners
343.02 -> the mouse down event and remove Handler
347.1 -> function alright let's double check and
350.22 -> make sure this still works
352.38 -> I click on that then click the outside
356.94 -> click on that and click the menu item
360.78 -> finally click the trigger button to
363.72 -> toggle it back to close
367.68 -> I think we came up with here is pretty
370.62 -> nice as you can see we'll just see react
373.44 -> hook and some basic style we can create
376.319 -> a nice looking drop down menu not only
379.44 -> does we now have some react hook thus we
382.08 -> can reuse in on Cut different ways this
385.38 -> video is sober and again if you like
387.72 -> this video please hit the Subscribe
390.06 -> button and give me a thumb up that will
392.58 -> inspire me a lot thank you guys for
394.5 -> watching and see ya
Source: https://www.youtube.com/watch?v=HfZ7pdhS43s