mirror of
https://github.com/vercel/commerce.git
synced 2025-07-05 04:31:22 +00:00
31 lines
800 B
TypeScript
31 lines
800 B
TypeScript
import { RefObject, useEffect } from 'react'
|
|
import { MouseAndTouchEvent } from './types.utils'
|
|
|
|
export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
|
|
ref: RefObject<T>,
|
|
callback: (event: MouseAndTouchEvent) => void
|
|
) {
|
|
useEffect(() => {
|
|
const listener = (event: MouseAndTouchEvent) => {
|
|
const el = ref?.current
|
|
|
|
// Do nothing if clicking ref's element or descendent elements
|
|
if (!el || el.contains(event.target as Node)) {
|
|
return
|
|
}
|
|
|
|
callback(event)
|
|
}
|
|
|
|
document.addEventListener(`mousedown`, listener)
|
|
document.addEventListener(`touchstart`, listener)
|
|
|
|
return () => {
|
|
document.removeEventListener(`mousedown`, listener)
|
|
document.removeEventListener(`touchstart`, listener)
|
|
}
|
|
|
|
// Reload only if ref or handler changes
|
|
}, [ref, callback])
|
|
}
|