Last active
September 15, 2022 15:20
-
-
Save stwgabriel/58f73d6b09b0681882bd6544943b7248 to your computer and use it in GitHub Desktop.
click outside to close hook
This file contains hidden or 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, useRef } from 'react'; | |
| function useClickOutside(handler: () => void, additionalTriggerElement?: Element) { | |
| const domNodeRef = useRef(null); | |
| useEffect(() => { | |
| function outsideHandler(event: Event) { | |
| if (!domNodeRef.current) return; | |
| const refElement = domNodeRef.current as Element; | |
| const eventElement = event.target as Element; | |
| // conditionals | |
| const refElementIsDifferentFromEventElement = refElement !== eventElement; | |
| const refElementIsDifferentFromAdditionalTriggerElement = ( | |
| refElement !== additionalTriggerElement); | |
| const refElementDoesntContainsAnEventElement = !refElement.contains(eventElement); | |
| const additionalTriggerElementDoesntContainsAnEventElement = ( | |
| !additionalTriggerElement?.contains(eventElement)); | |
| if ( | |
| refElementIsDifferentFromEventElement | |
| && refElementIsDifferentFromAdditionalTriggerElement | |
| && refElementDoesntContainsAnEventElement | |
| && additionalTriggerElementDoesntContainsAnEventElement | |
| ) { | |
| handler(); | |
| } | |
| } | |
| document.addEventListener('mousedown', outsideHandler); | |
| return () => { | |
| document.removeEventListener('mousedown', outsideHandler); | |
| }; | |
| }); | |
| return domNodeRef; | |
| } | |
| export default useClickOutside; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment