48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { useEffect, RefObject } from 'react'
|
|
|
|
interface UseClickOutsideOptions {
|
|
enabled?: boolean
|
|
eventType?: 'mousedown' | 'click'
|
|
includeEscape?: boolean
|
|
}
|
|
|
|
export const useClickOutside = (
|
|
ref: RefObject<HTMLElement | null>,
|
|
callback: () => void,
|
|
options: UseClickOutsideOptions = {}
|
|
) => {
|
|
const {
|
|
enabled = true,
|
|
eventType = 'mousedown',
|
|
includeEscape = false
|
|
} = options
|
|
|
|
useEffect(() => {
|
|
if (!enabled) return
|
|
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
const handleEscape = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
document.addEventListener(eventType, handleClickOutside)
|
|
if (includeEscape) {
|
|
document.addEventListener('keydown', handleEscape)
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener(eventType, handleClickOutside)
|
|
if (includeEscape) {
|
|
document.removeEventListener('keydown', handleEscape)
|
|
}
|
|
}
|
|
}, [ref, callback, enabled, eventType, includeEscape])
|
|
}
|