JAVASCRIPT
useClickOutside Hook to Detect Outside Clicks
Implement a React `useClickOutside` hook to trigger an action when a user clicks anywhere outside a referenced DOM element, ideal for closing modals, dropdowns, or popovers.
import { useEffect, useRef } from 'react';
function useClickOutside(handler) {
const domNode = useRef();
useEffect(() => {
const maybeHandler = (event) => {
if (!domNode.current?.contains(event.target)) {
handler();
}
};
document.addEventListener('mousedown', maybeHandler);
return () => {
document.removeEventListener('mousedown', maybeHandler);
};
}, [handler]);
return domNode;
}
// Example Usage:
// function Dropdown() {
// const [isOpen, setIsOpen] = useState(false);
// const dropdownRef = useClickOutside(() => setIsOpen(false));
// return (
// <div ref={dropdownRef} style={{ position: 'relative', display: 'inline-block' }}>
// <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
// {isOpen && (
// <div style={{
// position: 'absolute',
// top: '100%',
// left: 0,
// border: '1px solid black',
// padding: '10px',
// backgroundColor: 'white',
// zIndex: 1
// }}>
// Dropdown Content
// </div>
// )}
// </div>
// );
// }
How it works: This `useClickOutside` hook takes a callback `handler` and returns a `ref`. When a click (specifically `mousedown`) event occurs anywhere in the document, the hook checks if the clicked target is *inside* the element associated with the returned `ref`. If the click is outside, the provided `handler` function is executed. This is perfect for dismissing UI elements like dropdowns, modals, or tooltips when a user clicks away from them.