DOM & Layout·loomora → useClickAway
⚙Related configs↗useClickAway
Registers mouse and touch event listeners on document to trigger a callback whenever a click occurs outside the specified element ref. Essential for dismissing dropdowns, popovers, and dialogs.
Interactive live playground
Interact with the hook state and inspect computed return values in real time.
Clicking outside the modal card automatically dismisses it.
Click Away Controls
Dismissals Captured0
How to call
Import directly from the Loomora root package in any React client component.
import { useRef, useState } from 'react'
import { useClickAway } from 'loomora'
export function DropdownMenu() {
const [open, setOpen] = useState(false)
const menuRef = useRef<HTMLDivElement>(null)
useClickAway(open, menuRef, () => setOpen(false))
return (
<div>
<button onClick={() => setOpen(!open)}>Toggle</button>
{open && <div ref={menuRef}>Menu Content</div>}
</div>
)
}Return values & methods
API signatures and utilities returned by this hook.
| Method / Prop | Type | Description |
|---|