28 lines
748 B
TypeScript
28 lines
748 B
TypeScript
|
import { useEffect, type RefObject } from 'react'
|
||
|
|
|
||
|
|
type Event = MouseEvent | TouchEvent
|
||
|
|
|
||
|
|
export const useClickOutside = <T extends HTMLElement = HTMLElement>(
|
||
|
|
reference: RefObject<T | null>,
|
||
|
|
handler: (event: Event) => void,
|
||
|
|
) => {
|
||
|
|
useEffect(() => {
|
||
|
|
const listener = (event: Event) => {
|
||
|
|
const element = reference?.current
|
||
|
|
if (!element || element.contains((event?.target as Node) || undefined)) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
handler(event)
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('mousedown', listener)
|
||
|
|
document.addEventListener('touchstart', listener)
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener('mousedown', listener)
|
||
|
|
document.removeEventListener('touchstart', listener)
|
||
|
|
}
|
||
|
|
}, [reference, handler])
|
||
|
|
}
|