Improving User Interactivity Using the useClickOutside Hooks

Introduction to the useClickOutside hooks

In the internal implementation of the useClickOutside custom hook, the React useEffect hook is utilized.

In the Global Event Handling and Interactive UI lesson, we learned about a case where we can detect when a user clicks outside a component. This feature is pretty generic, and we want to take advantage of this in various parts of the project, such as dismissing a modal or tooltip—see the image below.

Implement the useClickOutside hook