useOnClickOutside

Hooks

Run a callback when a click or touch occurs outside the referenced element.

Install

npx bouncekit@latest add useonclickoutside

Import

import { useOnClickOutside } from "@/hooks/use-on-click-outside.ts"

import { useOnClickOutside } from "@/hooks/use-on-click-outside"

const ref = useRef<HTMLDivElement>(null)
useOnClickOutside(ref, () => setOpen(false))

<div ref={ref}>Dropdown content</div>

API Reference

Prop	Type	Required	Description
`ref`	`RefObject<T \| null>`	yes	Ref attached to the element to monitor.
`handler`	`(event: MouseEvent \| TouchEvent) => void`	yes	Callback on outside click.

Source

src/hooks/use-on-click-outside.ts

Components/Hooks/useOnClickOutside