JAVASCRIPT
Detect Clicks Outside Element with useClickOutside Hook
Create a React `useClickOutside` hook to trigger actions when a user clicks outside a specific DOM element, ideal for closing modals or dropdown menus.
import { useEffect, useRef } from 'react';
function useClickOutside(handler) {
const domNode = useRef();
useEffect(() => {
const maybeHandler = (event) => {
if (!domNode.current || !domNode.current.contains(event.target)) {
handler();
}
};
document.addEventListener('mousedown', maybeHandler);
return () => {
document.removeEventListener('mousedown', maybeHandler);
};
}, [handler]);
return domNode;
}
// Example Usage:
// function DropdownMenu() {
// const [isOpen, setIsOpen] = useState(false);
// const ref = useClickOutside(() => setIsOpen(false));
// return (
// <div ref={ref} style={{ position: 'relative', display: 'inline-block' }}>
// <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
// {isOpen && (
// <ul style={{ position: 'absolute', border: '1px solid #ccc', background: '#fff' }}>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// </ul>
// )}
// </div>
// );
// }
How it works: The `useClickOutside` hook detects clicks that occur outside of a specific referenced DOM element. It attaches a global event listener to the `document` and triggers a provided `handler` function if the click target is not within the referenced element. The hook returns a `useRef` object that should be attached to the component's root element you want to monitor. This is highly useful for user interface patterns such as automatically closing dropdowns, modals, or context menus when the user clicks elsewhere on the page.