useClickOutside

NewSSR SAFE

Detects clicks outside of a target element.

$ pnpm dlx shadcn@latest add @byphongphan/use-click-outside

Requires @byphongphan in components.json

ui & interaction

use-click-outside.tsx

Outside clicks0

Target element

Outside areaClick outside menu

Click outside the target element to trigger the callback.

Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-click-outside

Requires @byphongphan in components.json

Usage

import { useState } from "react"import { useClickOutside } from "@/shared/hooks"
export function DropdownMenu() {  const [isOpen, setIsOpen] = useState(false)  const menuRef = useClickOutside<HTMLDivElement>(() => setIsOpen(false))
  return (    <div className="relative">      <button onClick={() => setIsOpen((prev) => !prev)}>Toggle Menu</button>      {isOpen && (        <div ref={menuRef} className="dropdown-panel">          <p>Click outside this panel to close it.</p>        </div>      )}    </div>  )}

Props & Parameters

Param	Type	Default	Description
`handler`	`(event: MouseEvent \| TouchEvent) => void`	—	Callback invoked when a click or touch event occurs outside the referenced element.
`options.enabled`	`boolean`	`true`	Whether the click outside event listener is active.
`options.events`	`string[]`	`["mousedown", "touchstart"]`	Array of DOM event types to listen for.
`options.ignoreRefs`	`RefObject<HTMLElement>[]`	`[]`	Optional list of other element refs whose clicks will not trigger the callback.

useClickOutside

Installation

Usage

Props & Parameters

Command Palette