How to detect a click outside of a React Component (16.8+)

Blog post coming soon w/ code snippets

[tylereikenberg]

This tutorial is perfect, I've been looking for something like this forever. Thank you so much!

[raulbarriga]

Instead of setVisible on the if statement of the custom hook, would it be possible to add styling on the ref inside that if statement? I tried your implementation without setVisible & just to set some styles, but I'm getting an error 'TypeError: Cannot set property 'backgroundColor' of undefined' after I click on the ref div & then click outside it.

[akashkadia]

Thank you so much, it can be very helpful

[cogwheelLearning]

Hey, cool video! What program do you use for video editing and desktop recording?

[NdifrekeEkim]

What happens if the element in document disables bubbling. Document will not receive the click event

[Nanospeedz]

this is bad because the button is outside the div so if you try to toggle on the div through the button, the ref will reverse the boolean since the button is not the `current`

[raba]

This works but for some reason the button is requiring me to click twice to activate the drop down. The first click just selects the button. The 2nd click activates the drop down. Any suggestions anyone?