Created
July 1, 2020 14:52
-
-
Save fmontone/12368519a395a85aa044498e8aa06f57 to your computer and use it in GitHub Desktop.
Custom Hook to track click outside given node ref
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect } from 'react'; | |
const useClickOutside = ( | |
ref: React.MutableRefObject<HTMLElement>, | |
handler: (event: MouseEvent | TouchEvent) => void) => { | |
useEffect(()=>{ | |
const listener = (event: MouseEvent | TouchEvent) => { | |
if(!ref.current || ref.current.contains(event.target as Node)) { | |
return | |
} | |
handler(event); | |
} | |
document.addEventListener('mousedown', listener); | |
document.addEventListener('touchstart', listener); | |
return () => { | |
document.removeEventListener('mousedown', listener); | |
document.removeEventListener('touchstart', listener); | |
} | |
}, [ref, handler]) | |
} | |
export { useClickOutside }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment