useClickOutside
HookDetects clicks outside of a referenced element. Great for dropdowns and modals.
npx arupui add use-click-outside
Usage
use-click-outside.tsx
import { useClickOutside } from "@/hooks/use-click-outside"
function Dropdown() {
const [open, setOpen] = useState(false)
const ref = useRef<HTMLDivElement>(null)
useClickOutside(ref, () => setOpen(false))
return (
<div ref={ref}>
{open && <DropdownMenu />}
</div>
)
}Parameters
| Parameter | Type | Description |
|---|---|---|
ref | RefObject<HTMLElement> | Ref to the element |
handler | (event) => void | Callback when click is outside |
refRefObject<HTMLElement>Ref to the element
handler(event) => voidCallback when click is outside
Returns
void