Created
August 2, 2022 06:52
-
-
Save isNan909/240f60048dc684a0c830d691a86ea2e1 to your computer and use it in GitHub Desktop.
Listen to clicked outside
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 { useState, useEffect, useRef } from "react"; | |
| function App() { | |
| // Create a ref that we add to the element for which we want to detect outside clicks | |
| const ref = useRef(); | |
| // State for our modal | |
| const [isModalOpen, setModalOpen] = useState(false); | |
| // Call hook passing in the ref and a function to call on outside click | |
| useOnClickOutside(ref, () => setModalOpen(false)); | |
| return ( | |
| <div> | |
| {isModalOpen ? ( | |
| <div ref={ref}> | |
| 👋 Hey, I'm a modal. Click anywhere outside of me to close. | |
| </div> | |
| ) : ( | |
| <button onClick={() => setModalOpen(true)}>Open Modal</button> | |
| )} | |
| </div> | |
| ); | |
| } | |
| // Hook | |
| function useOnClickOutside(ref, handler) { | |
| useEffect( | |
| () => { | |
| const listener = (event) => { | |
| // Do nothing if clicking ref's element or descendent elements | |
| if (!ref.current || ref.current.contains(event.target)) { | |
| return; | |
| } | |
| handler(event); | |
| }; | |
| document.addEventListener("mousedown", listener); | |
| document.addEventListener("touchstart", listener); | |
| return () => { | |
| document.removeEventListener("mousedown", listener); | |
| document.removeEventListener("touchstart", listener); | |
| }; | |
| }, | |
| // Add ref and handler to effect dependencies | |
| // It's worth noting that because passed in handler is a new ... | |
| // ... function on every render that will cause this effect ... | |
| // ... callback/cleanup to run every render. It's not a big deal ... | |
| // ... but to optimize you can wrap handler in useCallback before ... | |
| // ... passing it into this hook. | |
| [ref, handler] | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment