A small, focused React hook that triggers a callback when a mouse or touch interaction occurs outside a specified element.
npm install @pxlmvr/use-onclickoutsideA small, focused React hook that triggers a callback when a mouse or touch interaction occurs outside a specified element.
Designed to be:
- ✅ TypeScript-first
- ✅ Lightweight (no dependencies besides React)
- ✅ Safe to use across modals, dropdowns, popovers, etc.
- ✅ Compatible with React 16.8+ (hooks)
---
``bash`
npm install use-on-click-outsideor
yarn add use-on-click-outside
`tsx
import { useRef } from 'react'
import { useOnClickOutside } from 'use-on-click-outside'
function Dropdown() {
const ref = useRef
useOnClickOutside(ref, () => {
console.log('Clicked outside')
})
return
$3
You can provide additional refs that should be treated as “inside” clicks and therefore not trigger the callback:
`tsx
const containerRef = useRef(null)
const buttonRef = useRef(null)useOnClickOutside(containerRef, () => {
setOpen(false)
}, [buttonRef])
`API
$3
`ts
useOnClickOutside(
ref: RefObject,
handler: (event: MouseEvent | TouchEvent) => void,
allowedNodes?: RefObject[]
): void
`$3
-
ref: A React ref object pointing to the element you want to detect outside clicks for.
- handler: A callback function that gets called when a click or touch event occurs outside the referenced element.
- allowedNodes (optional): An array of React ref objects that should be considered as inside clicks and excluded from triggering the handler.Exclusion rules
The handler will not be called if:
- The event target is inside
ref
- The event target is inside any allowedNodes
- The event target has the CSS class:`css
__exclude-click-outside__
`Events
The hook listens for the following events:
-
mousedown
- touchstart`This ensures consistent behavior across mouse and touch devices.
- React 16.8+
React is listed as a peer dependency, no duplicate React instances are bundled.