In modern front-end development, particularly when dealing with interactive UIs, there are everyday situations where you need to detect clicks outside a specific element to close menus, popups, or modal windows. A reusable Click Outside component makes this task simple, ensuring your code stays DRY (Don’t Repeat Yourself) and is easy to maintain.

In this post, we will explore how to create a click outside component in React using a custom hook and how you can integrate it into your projects.

The problem

When you have dropdowns, modals, or any overlay UI element, closing them when clicking outside is a common UX requirement. Instead of writing the logic repeatedly for each component, you can create a reusable hook that detects clicks outside the target element.

Let’s walk through how to create and use a useClickOutside hook.

Creating the `useClickOutside` Hook

The useClickOutside hook listens for clicks outside the specified element and triggers a callback function when the user clicks anywhere outside the component.

const useClickOutside = (callback) => {

const elementRef = useRef(null); // Create a reference for the DOM element

useEffect(() => {

// Function to handle the click event

function handleClickOutside(event) {

// Check if the click was outside the element

if (elementRef.current && !elementRef.current.contains(event.target)) {

callback(); // Trigger the callback when clicked outside

}

}

// Attach the event listener on mount

document.addEventListener('mousedown', handleClickOutside);

// Clean up the event listener on unmount

return () => {

document.removeEventListener('mousedown', handleClickOutside);

};

}, [callback]);

return elementRef;

};

export default useClickOutside;

Code explanation

useRef: We use useRef to keep track of the DOM element we want to monitor.
Event Listener: The mousedown event is added to detect when the user clicks anywhere on the page.
Callback Function: When a click is detected outside the specified element, we trigger the callback function passed to the hook.
Cleanup: We remove the event listener when the component unmounts to prevent memory leaks.

Using the Hook in a Project

An example with a simple dropdown:

import { useState } from 'react'

import useClickOutside from './useClickOutside' // Import the custom hook

const Dropdown = () => {

const [isOpen, setIsOpen] = useState(false)

// Use the custom hook to monitor clicks outside the dropdown

const dropdownRef = useClickOutside(() => setIsOpen(false))

return (

<button onClick={() => setIsOpen((prev) => !prev)}>

Toggle Dropdown

</button>

{isOpen && (

<ul>

</ul>

</div>

)}

</div>

)

}

export default Dropdown

Place ref={dropdownRef} on the first div element (the wrapper). Placing the ref={dropdownRef} on the dropdown element will cause a bubbling issue.

Bonus

Here is how you can use it with useDispatch when you are using redux to manage state.

const dispatch = useDispatch()

const elementRef = useClickOutside(() => dispatch(closeModal()))