Хук useOnClickOutside в ReactJS

Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его пределами. Это может стать настоящей проблемой, потому что вам придется отслеживать состояние компонента и события, происходящие за его пределами. Но что, если я скажу вам, что у этой проблемы есть решение?

Введите хук useOnClickOutside. Этот хук предоставляет простой способ обработки щелчка вне компонента в ReactJS. В этом блоге мы подробно рассмотрим хук и узнаем, как он работает и как мы можем использовать его в наших проектах.

Что такое пользовательский хук?

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

Как работает хук useOnClickOutside?

Хук useOnClickOutside работает путем установки слушателя событий на объекте документа. Слушатель событий прослушивает щелчки и проверяет, произошел ли щелчок за пределами компонента. Если это так, хук вызовет переданную вами функцию.

Вот код для хука useOnClickOutside:

import { useEffect } from 'react';

export function useOnClickOutside(ref, handler) {
  useEffect(() => {
    const listener = event => {
      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);
    };
  }, [ref, handler]);
}

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

Мы также используем хук useEffect для очистки слушателей событий, когда компонент размонтируется. Это важно для предотвращения утечки памяти в нашем приложении.

Вот и все! Хук useOnClickOutside - это простой, но мощный инструмент для обработки нажатий вне компонента в ReactJS.

Вот простой пример того, как вы можете использовать хук useOnClickOutside в своем коде:

import React, { useRef } from 'react';
import { useOnClickOutside } from 'use-onclickoutside';

function Example() {
  const ref = useRef();
  useOnClickOutside(ref, () => {
    console.info('clicked outside');
  });
  
  return (
    <div ref = {ref}>
      Click anywhere outside of this box
    </div>
  );
}

В этом примере мы используем хук useRef для создания ссылки на элемент div. Затем мы передаем ссылку в хук useOnClickOutside вместе с функцией обратного вызова, которая будет вызываться, когда кто-то щелкнет за пределами div.

Заключение

В заключение, хук useOnClickOutside предоставляет удобный способ обработки нажатий вне компонента в ReactJS. Если вы работаете над модалом, выпадающим меню или любым другим компонентом, который должен закрываться, когда кто-то щелкает за его пределами, этот хук может помочь. Благодаря своей простоте и возможности повторного использования, он является обязательным инструментом для любого разработчика ReactJS.