Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProCall a handler when a pointer press lands outside one or more elements, for closing menus, popovers and inline editors.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for a custom dropdown, inline editor or popover you build yourself and that should close or commit when the person clicks elsewhere.
Do not use it with Popover, Dropdown Menu or Dialog from this library; they handle outside presses already.
import { useClickOutside } from "@/hooks/use-click-outside"const ref = React.useRef<HTMLDivElement>(null)
useClickOutside(ref, () => setOpen(false), { enabled: open })useClickOutside(refs, handler, options?): void
| Name | Type | Description |
|---|---|---|
refs | RefObject<Element | null> | RefObject[] | The element or elements that count as inside. |
handler | (event: PointerEvent | TouchEvent) => void | Called for a press outside all of them. |
enabled | boolean (option, default true) | Listen only while true. |
events | string[] (option, default ["pointerdown"]) | Events to listen for. |
The listener is on the document in the capture phase, so it still fires if something stops propagation. Presses inside any listed element, or in an element that is its descendant in the DOM, are ignored. The newest handler is always used.
Outside presses are a pointer-only way to dismiss. Always give keyboard users another way: close on Escape and return focus to the trigger. Do not close on focus moving out unless the pattern requires it.
The hook ships with renderHook tests (use-click-outside.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.