В современной веб-разработке решающее значение имеет создание интерактивных и адаптивных пользовательских интерфейсов. Одним из распространенных шаблонов взаимодействия с пользователем является обнаружение кликов за пределами определенного элемента, например раскрывающегося меню или модального окна, и запуск соответствующих действий. В этой статье мы рассмотрим различные методы реализации функциональности внешнего клика в React с помощью хуков, а также приведем примеры кода.

1. Подход с использованием useRef и useEffect:

   import React, { useRef, useEffect } from 'react';
   function OutsideClickExample() {
   const ref = useRef(null);
   useEffect(() => {
   function handleClickOutside(event) {
     if (ref.current && !ref.current.contains(event.target)) {
       // Perform actions when clicked outside the element
     }
   }
   document.addEventListener('mousedown', handleClickOutside);
   return () => {
     document.removeEventListener('mousedown', handleClickOutside);
   };
   }, []);
   return <div ref={ref}>Element to track outside clicks</div>;
   }

2. Подход с использованием библиотеки реакции-использования:
   Пакет react-use-libraryпредоставляет специальный крючок под названием useClickAway, который упрощает реализацию функциональности внешнего клика.

   import React from 'react';
   import { useClickAway } from 'react-use-library';
   function OutsideClickExample() {
   const ref = useRef(null);
   useClickAway(ref, () => {
   // Perform actions when clicked outside the element
   });
   return <div ref={ref}>Element to track outside clicks</div>;
   }

3. Подход с использованием порталов React.
   Порталы React позволяют отображать компонент за пределами иерархии DOM его родительского компонента, что делает его мощным инструментом для реализации функциональности внешнего клика.

   import React, { useState } from 'react';
   import ReactDOM from 'react-dom';
   function OutsideClickExample() {
   const [isOpen, setIsOpen] = useState(false);
   function handleOutsideClick(event) {
   if (!event.target.closest('.dropdown-container')) {
     setIsOpen(false);
   }
   }
   return (
   <div>
     <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
     {isOpen &&
       ReactDOM.createPortal(
         <div className="dropdown-container" onClick={handleOutsideClick}>
           Dropdown content
         </div>,
         document.body
       )}
   </div>
   );
   }

Реализовать функциональность внешнего клика в React можно с помощью различных подходов. Мы исследовали три метода: использование useRef и useEffect, использование пакета React-use-library и использование порталов React. Каждый подход имеет свои преимущества, и выбор зависит от конкретных требований вашего приложения. Используя эти методы, вы сможете создавать более интерактивные и удобные для пользователя компоненты в своих проектах React.