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:
github.com/thekietvuong/Dropd...
Check out the dropdown menu - React tutorial right here:
1.Dropdown Menu - React Tutorial for Beginners
• Dropdown Menu - React ...
2.Click Outside to Close - React Hook
** This video **
Download and install Node JS right here:
nodejs.org/en/
🎵Track: Good Days - Yung Logos
KZbin Library Audio

[@amrmohamed-ml7ek]

Great video man, Keep it going!

[@mytech-youtube8436]

Amazingly well made tutorial. From production to content. Quality content!

[@johnasto7913]

Great video man, it's exactly what I wanted to know about it. Keep it going!!

[@aniltube3749]

Short and sweet cool explanation 💕

[@roach7616]

amazing vid! short and sweet, thank you

[@Elias-xp3bs]

This was super helpful! The tutorial was very clear and had great explanations

[@markopolo2224]

very helpful thanks!

[@thomaslenormand9057]

Good work ! For sure more video like this one are necessary. Great explanations ! Thank you :)

[@FGA-47]

Thanks man that was really helpful ❤

[@christodoulopoulos9278]

Thank you, just what I needed

[@Radiotiq]

the editing really helps me to understand the content, just like when u clicking the menu trigger u add some little text to demonstrate true or false, well done mate

[@M_Hosseini80]

Thank you! That was Helpful.

[@air_kene3419]

Very helpful, thanks!

[@meteoroestudiografico435]

Great video guy!!! Continue making more videos please. :)

[@chan4est]

Worked perfectly! Thank you!!

[@Baleandor]

This helped me a lot! I'd love a draggable element tutorial!

[@MuhammadKhan-vm5ow]

Great Video, so informative and very professional, Thank you for you helps and dont stop making videos!

[@slygrin1971]

Grear tutorial, thanks !

[@vitaliisili]

Well explanation and super helpful

[@lucoo3457]

thanks, this was really helpful

[@mingirc]

Good and clean solution. Thanks.

[@lewiswill3663]

Very helpful, thank you.

[@user-sy3yv1mx9i]

The Best, easy and quickly!!!

[@yavuzyalcnkaya5371]

Hey brother, thank you for this tutoial, your are the best

[@JDIT21]

I rarely comment, but thanks to this tutorial and your way of explaining it, things became clearer. Subscribed! 🔥🔥

[@billy.n2813]

Nice, thank you!

[@Byte-Makers]

thankyou! it's really working man! thanks.. subscribing

[@widya2550]

Amazing, thanks bro. I'm fully understand

[@vipinsanthosh2230]

really good video bro

[@_kadirmetin]

Thanks for the video ✨

[@user-uv8iu9db8l]

This video is very useful. I successfully applied this Thanks Bro Keep doing such content

[@ghastianydhaa]

thx u so much!

[@user-nd7sk2ph4f]

This video was really great. This model of explaining is unique for someone who is not well known on KZbin. I hope to learn more from you.

[@poolcaceres493]

Thanks man!

[@chibykes_dev]

Thanks Very helpful video

[@alextruong1826]

Very easy to understand with the extra animations and illustrations! You even explained everything in details (whilst not overtalking about it) which made it even better! Millions thanks to your great work!

[@frans3884]

Thank You. This video really helped me

[@AnthonyHeimlich]

Awesome!

[@emanoelmattosribeiro5220]

Very nice!

[@dotslash2798]

Its work. thank you.

[@amisoliman123]

You made it very easy thanks

[@WellingtonFernandes]

Thank you very much for the tip, it will solve my biggest problem of the day

[@user-wv1zw6vd6t]

VERY GOOD, THIS GUY IS A COMPLETE TEACHER, CALM AND GOOD EXPLANATIONS, USING EXAMPLES TO BETTER UNDERSTANDING, AND YEA IM SPEAKING LOUD

[@TK-ot8dj]

I like the way you say it out loud :))

[@malfazakki1803]

amazing content!! thanks a lot!! 😁😁

[@user-sq1hj4te8p]

Thanks Man

[@leafmii]

Thanks Brother!

[@chuchober]

thx for share it!

[@AlEgorova]

Thanks for sharing on github your code, it was very helpful for my project )))

[@martapfahl940]

Bro you helped me so much I couldnt figure it out for days! My mistake was placing the opening and closing button outside the div with the ref so it would open immediately after clicking the button again to close it.

[@priyanshramnani1751]

Thank you sooo soo soooo muchhh!!!!!!

[@innovacia2226]

Thank you!!😊

[@David-tn9iu]

Thanks a lot, it was very helpul for me, specially for understanding about why using every single part of the code. 👍

[@analistadesistemas]

Excelent!

[@noumanmalik960]

Thank you

[@asmet2701]

Thanks!

[@O_oph3o]

excellent, just keep going

[@jellyjollyjelly9513]

thank you so so much

[@yan7620]

thank u bro

[@VikasKumar-lg2vr]

lovely brother.. you helped me.. 😍

[@myhanhnguyen5198]

thanks a lot

[@top_louie8304]

omg , thank you was struggling on this for a while ...

[@TK-ot8dj]

Hope this useful for you :)))

[@animeshanandcool]

Thnx bro

[@mochacinoo]

thx for sharing

[@cristianosUnidosUSA]

Excelletn! U got a like!

[@cantseeme101]

Always seem to be coming back to this one

[@bryanemmanuel7004]

Thank you bro.

[@sumanthachark]

Informative

[@sulaimandev]

Thank you so much...

[@udittiwari8240]

Sooo good

[@ElyBourland]

Thanks for this video. It gave me a solution to my problem. Liked and subscribed.

[@ElyBourland]

I was getting an console error: Uncaught TypeError: Cannot read properties of null (reading 'contains') at HTMLDocument.handler. But if I wrapped the if statement with another if (menuRef.current) { }, the error went away.

[@auroramawisa]

Gracias !!!

[@CriptoLeaks]

Thank you bro. One question, how to add some text below the main text of menu...for example any description

[@favazahammed4026]

thanks

[@user-io3ml5up6u]

good that mate

[@rohitrawat5536]

you made this look really simplw and understandable thanks a lot!👍

[@TK-ot8dj]

Thank you so much for your kind words and feedback!

[@rohitrawat5536]

@@TK-ot8dj hay can you make same video for class based component because i am trying to do the same but for every click on the home page it is calling clickhandlerOutside

[@sumonbala9648]

take love brother

[@AbidHasan-qb2zc]

Great

[@LeHoHoangThanhK17HCM]

hay quá bro ơi đúng cái tôi đang cần

[@TK-ot8dj]

Cảm ơn bạn nhé

[@keifer7813]

Nice explanation. I wonder if it would be better to use an empty dependency array for the useEffect instead of a clean-up function though

[@blackpurple9163]

That's not how the empty array works, empty array only renders it once, it does not remove the functionality once the component is unmounted, so if you don't remove the eventListener, the outside click event might trigger even after the drop-down menu etc is hidden, I'm not exactly sure since I'm a beginner too but cleaning it up is always recommended

[@koshgosh3081]

спасибо! все понятно с первого раза.

[@atTran-yy7ce]

Very good knowledge, are you Vietnamese?

[@mariomiletic22]

🔥

[@minhnguyen86]

Amazing tutorial, this helps me a lot. Are bro come from Vietnamese ??

[@TK-ot8dj]

Thank bro :))) yes, Im Vietnamese

[@nitiwatchawkanha748]

why my warning is Cannot read properties of null (reading 'contains')

[@KamalSingh-tq8hk]

Why did you not put empty dependecy array in useEffect??

[@RoyaleRetro]

hay lắm a

[@TK-ot8dj]

cảm ơn em nhé :)))

[@ilhamrifai3714]

how to close navbar after i click menu?????

[@solo-yl8uc]

For me I have to add condition that is modal open before addevent listener, if I don't have a condition, useEffect will not remove EventListener , I don't know why this has happened.

[@immanuelrajmohan830]

why did you use mousedown event ,instead of click?

[@Charlie-yo2xt]

I have an error to : cont read a propities of undefined (reading 'contains')

[@junyorff12]

Great video, one question, please make the font larger for me to watch on Smartphone. 🔥

[@TK-ot8dj]

thanks for your advice, i will do better in the next video

[@unluckydude8882]

Do u do ur own css? It's Amazing!

[@TK-ot8dj]

Thanks. Yes, I do it myself. You can watch how I built it from scratch in the previous video kzbin.info/www/bejne/gYOyl6Jtq9p8fbs

[@user-es2jt6qe2o]

Cant do this with typescript

[@rustymendoza8727]

is it still ok if use click event? not mousedown?

[@rizkydjanuar2809]

probably we can use onBlur to implement click outside

[@romanmed9035]

but if i have more than one dropdowns? one dropdown is opened and i click on other dropdown. can i closed first and opened second dropdown?

[@blackpurple9163]

How would you go ahead and make this into a custom hook? So it can be used with any kind of popup or sidebar or navbar?

[@TK-ot8dj]

Great question! To make this into a custom hook, you can extract the functionality of detecting an outside click and closing the menu into a separate function, which can be reused for any type of popup, sidebar or navbar. Here's an example of how you can create a custom hook: import { useEffect } from "react"; export const useClickOutside = (ref, callback) => { const handleClick = (e) => { if (ref.current && !ref.current.contains(e.target)) { callback(); } }; useEffect(() => { document.addEventListener("click", handleClick); return () => { document.removeEventListener("click", handleClick); }; }); }; Then, in your component where you want to use the custom hook, you can simply use it like this: import { useRef } from "react"; import { useClickOutside } from "./useClickOutside"; const MyComponent = () => { const ref = useRef(null); const handleCloseMenu = () => { // close your menu logic here }; useClickOutside(ref, handleCloseMenu); return ( // your menu component here ); };

[@MubeenKhan786]

If I click on one menu item then after visiting that page navbar should be closed.

[@artemkazzakov6194]

Thanks it was helpfull for me. In typescript add "as Node" -(GPT tell to do it) in "if (!formRef.current?.contains(e.target as Node))" how do you think is it norm practis?

[@TK-ot8dj]

I have no experience with TypeScript, but I plan to learn it in the near future :))

[@ozoindaprince]

i have 2 dropdowns and they open and close at the same time