Як виявити клацання поза елементом (простий спосіб)

Дізнайтесь, як створити хук “useOutsideClick” найпростіший спосіб. Назва хуку говорить сама за себе — він використовується для відстеження кліків поза певним елементом.

Приклад використання

Уявіть, що у вас є модальне вікно.
Вам потрібно визначити, коли користувач клацає поза межами модального вікна, щоб закрити його.

Імплементація функції (за допомогою TypeScript / React)

import { RefObject, useEffect } from 'react';  

export function useOutsideClick(  
 ref: RefObject,  
 condition: boolean,  
 onElementOutsideClick: () => void,  
) {  
 useEffect(() => {  
 function handleElementOutsideClick(event: MouseEvent) {  
 // Умова, яка перевіряє, чи клік був поза заданим елементом  
 if (  
 ref.current &&  
 !ref.current.contains(event.target as Node) &&  
 condition  
 ) {  
 // Якщо умова виконується, викликається функція onElementOutsideClick  
 onElementOutsideClick();  
 }  
 }  

 document.addEventListener('click', handleClickOutside);  

 return () => {  
 document.removeEventListener('click', handleClickOutside);  
 };  
 }, [ref, condition, onClickOutside]);  
}

Використання функції

import { useOutsideClick } from 'path_you_implemented_useOutsideClick';  

const modalRef = useRef(null);  
const [openModal, setOpenModal] = useState(false);  

useOutsideClick(  
 { current: myElementRef },  
 openModal,  
 // Якщо клік буде поза елементом 'myElementRef', викликається handleCloseModal і модальне вікно закривається  
 handleCloseModal(),  
);  

function handleCloseModal() {  
 setOpenModal(false);  
}  



    <.../>    

І ось так просто можна створити корисний хук useOutsideClick.

Перекладено з: How to detect a click outside of an element (straightforward)