23 lines
579 B
TypeScript
23 lines
579 B
TypeScript
|
import { useEffect } from 'react'
|
||
|
|
|
||
|
|
export const useClickOutsideAlerter = (
|
||
|
|
ref: React.RefObject<HTMLElement>,
|
||
|
|
callback: () => void
|
||
|
|
): void => {
|
||
|
|
useEffect(() => {
|
||
|
|
const handleClickOutside = (event: MouseEvent): void => {
|
||
|
|
if (
|
||
|
|
event.target != null &&
|
||
|
|
ref.current != null &&
|
||
|
|
!ref.current.contains(event.target as Node)
|
||
|
|
) {
|
||
|
|
callback()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.addEventListener('mousedown', handleClickOutside)
|
||
|
|
return () => {
|
||
|
|
document.removeEventListener('mousedown', handleClickOutside)
|
||
|
|
}
|
||
|
|
}, [ref, callback])
|
||
|
|
}
|