rypi-scrapper/src/hooks/useOutsideClickEventHandler.ts

42 lines
1.0 KiB
TypeScript
Raw Normal View History

import type { RefObject } from 'react'
import { useEffect, useRef } from 'react'
export const useOutSideClickEventHandler = (callback: () => void): RefObject<HTMLDivElement> => {
const wrapper = useRef<HTMLDivElement>(null)
useEffect(() => {
const handleClickOutside = (event: KeyboardEvent | MouseEvent): void => {
const currentEvent = event as KeyboardEvent
if (
wrapper.current == null ||
Boolean(wrapper.current.contains(currentEvent.target as Node)) ||
currentEvent.key !== 'Escape'
)
return
return callback()
}
window.addEventListener('click', (event) => {
return handleClickOutside(event)
})
window.addEventListener('keydown', (event) => {
return handleClickOutside(event)
})
return () => {
window.removeEventListener('click', (event) => {
return handleClickOutside(event)
})
window.removeEventListener('keydown', (event) => {
return handleClickOutside(event)
})
}
}, [])
return wrapper
}