Hook

useClickOutside

Runs a callback when pointer events happen outside a referenced element.

Hook

import { useClickOutside } from "@swirski/ui";

Live render

Preview

const ref = useRef<HTMLDivElement>(null);

useClickOutside(ref, () => setOpen(false), {
  enabled: open,
});

4 documented

Prop	Type	Default	Notes
`ref`Required	`RefObject<HTMLElement \| null>`	`-`	Element that owns the inside area.
`handler`Required	`(event: Event) => void`	`-`	Runs when the event target is outside the ref.
`options.enabled`	`boolean`	`true`	Turns listeners on or off.
`options.events`	`Array<"mousedown" \| "pointerdown" \| "touchstart">`	`["pointerdown"]`	Events to listen for.

1 documented

Value	Type	Notes
`return`	`void`	Registers document listeners in an effect and returns no value.