Click Outside to Close - React Hook

In this video I'll show you how to make a hook that runs whenever the user clicks outside of a DOM node.
Source: / little-neat-trick-to-c...
Code: github.com/ryanto/click-outsi...

[@codymccarty9327]

Cannot read property 'contains' can be fixed by changing current.contains to current?.contains

[@devkima6620]

FYI, i see the comments they have problems when click button to close, the state set to true back because you wrong to put ref. put ref into wrapper click button.

[@JimmyCheng]

I implemented something similar, where I have a header menu with a button to open a pop-up. But somehow, the pop-up won't show because as soon as I click the button, it closes the pop-up in the mean time because I think I am technically clicking outside the pop-up. Hmmm. Someone help>?

[@joelomoglio6450]

I have it working with one menu component on the page that uses the hook, but when I have multiple menu components on the page, only one of them works properly, the other ones close outside and when you click the menu. If that can be resolved, how can Imake this a global hook, so I don't have to have it it my menu and select components?

[@Richard-wg4lu]

i have done this but if i giving the same ref in the another div in the same component. The another div working perfectly but the first div have an issue that when i click the button it opens but if i click the button again it toggles to close and opens automatically. Do i have to use two different refs or something?

[@netsaosa4973]

Uncaught TypeError: helpRef.current is not a function

[@raba650]

What if the toggle button is outside the node where you put the ref at? I have something like this & the button’s detected as a click outside event that when I click on, it closes the component & quickly open it again. I want to have the click outside functionality along with the toggle when the button’s outside of the ref area.

[@olegmaz3969]

Thanks a lot!

[@adithyakiransekar]

What if you had multiple menus on the same page? The document click listeners will be attached multiple times

[@siddhant3852]

problem: when I click button to close, the state becomes true again , because of it I can't toggle open and close. any possible solution for this?

[@EmilyNilsen]

What a clear explanation, thank you so much, Ryan! My problem is now solved and you have a faithful new subscriber.

[@ygg.gasoline]

your way of doing it was much easier, faster and clearer then others i saw online. thank you!!

[@alirasheedmd]

What a great simple-to-understand solution. I was searching for this all over the web and could not find this kind of solution.

[@salymakhmedov2196]

Thank you for this. I used this code in my project and referenced this video in the code. Please make more practical videos like this!

[@dschenck]

Thanks, very clear! Thanks for taking that one extra step at the end about designing a reusable hook :)

[@sjadev]

This was exactly what I was looking for! Thanks, Ryan!

[@DevRSC]

Clear and straightforward explanation, just what I'm looking for thanks.

[@ewertoncassianoxavier3490]

Thank you very much for the excellent explanation, Ryan! Your code worked like a charm!

[@vancouverjunkremoval]

Thanks for this vid ryan! amazingly well explained! I gave helped solve that feature I didn't know how to implement with hooks

[@lazer1182]

This explanation is 100% clear. Teaching style is great