useClickOutside()
useClickOutside(
reference
,handler
,debounce
?):void
Defined in: src/hooks/dom/useClickOutside.ts:80
A custom React hook that detects clicks or touch events outside the specified target element. It is useful for closing dropdowns, modals, or menus when a user interacts outside the specified element. The handler function is called when the user clicks or touches outside the referenced element. Optionally, events can be debounced for better performance in rapid interaction scenarios.
Parameters
reference
RefObject
<null
| HTMLElement
>
The reference to the target element. The hook detects interactions outside this element.
handler
() => void
The callback function to execute when a click or touch is detected outside the element.
debounce?
number
= 0
The debounce delay in milliseconds for the event listener. Defaults to 0
(no debounce).
Returns
void
Examples
Example: Close a dropdown menu when clicking outside
import { useRef, useState } from 'react';
import { useClickOutside } from '@zl-asica/react';
const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
useClickOutside(ref, () => setIsOpen(false));
return (
<div>
<button onClick={() => setIsOpen(true)}>Open Menu</button>
{isOpen && (
<div ref={ref} style={{ border: '1px solid black', padding: '10px' }}>
This is a dropdown menu. Click outside to close.
</div>
)}
</div>
);
};
Example: Close a modal when touching outside
import { useRef, useState } from 'react';
import { useClickOutside } from '@zl-asica/react';
const MyComponent = () => {
const [isModalOpen, setIsModalOpen] = useState(false);
const modalRef = useRef<HTMLDivElement>(null);
useClickOutside(modalRef, () => setIsModalOpen(false), 200); // Debounced by 200ms
return (
<>
<button onClick={() => setIsModalOpen(true)}>Open Modal</button>
{isModalOpen && (
<div
ref={modalRef}
style={{
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
padding: '20px',
background: 'white',
borderRadius: '10px',
boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
}}
>
<p>This is a modal. Tap outside to close.</p>
</div>
)}
</>
);
};