useClickOutside

1'use client'
2 
3import * as React from 'react'
4 
5export function useClickOutside<T extends Element = Element>(
6  ref: React.RefObject<T> | React.RefObject<T>[],
7  handler: (event: MouseEvent | TouchEvent) => void,
8  options?: { enabled?: boolean },
9): void {
10  const { enabled = true } = options ?? {}
11 
12  const handlerEvent = React.useEffectEvent(handler)
13 
14  React.useEffect(() => {
15    if (!enabled)
16      return
17 
18    const abortController = new AbortController()
19 
20    const handleClickAway = (event: MouseEvent | TouchEvent) => {
21      const target = event.target as T
22      const refs = Array.isArray(ref) ? ref : [ref]
23 
24      const isClickAway = refs.every(r => r.current && !r.current.contains(target))
25 
26      if (isClickAway) {
27        handlerEvent(event)
28      }
29    }
30 
31    document.addEventListener('mousedown', handleClickAway, { signal: abortController.signal })
32    document.addEventListener('touchstart', handleClickAway, { signal: abortController.signal })
33 
34    return () => {
35      abortController.abort()
36    }
37  }, [ref, enabled])
38}