22 lines
587 B
JavaScript
22 lines
587 B
JavaScript
 
|
import { useEffect } from 'react'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hook that runs a callback on clicks outside the ref
|
||
|
|
*/
|
||
|
|
function useOnClickOutside(ref, callbackFn) {
|
||
|
|
useEffect(() => {
|
||
|
|
function handleClick(event) {
|
||
|
|
const isOutside = ref.current && !ref.current.contains(event.target)
|
||
|
|
if (isOutside) callbackFn(event)
|
||
|
|
}
|
||
|
|
|
||
|
|
// Bind the event listener
|
||
|
|
document.addEventListener('mousedown', handleClick)
|
||
|
|
return () => {
|
||
|
|
// Unbind the event listener on clean up
|
||
|
|
document.removeEventListener('mousedown', handleClick)
|
||
|
|
}
|
||
|
|
}, [ref])
|
||
|
|
}
|
||
|
|
|
||
|
|
export default useOnClickOutside
|