Создаем кастомный хук useOutsideClick на React.js
Создаем кастомный хук useOutsideClick на React.js
Веб-приложения неизбежно имеют множество интерактивных элементов, и часто требуется взаимодействовать с элементами при нажатии вне их области. Возможно, вы заметили, что некоторые люди зависают в таком состоянии, когда они не знают, как закрыть модальное окно на сайте, что является плохим пользовательским опытом. Эта статья поможет вам понять, как создать свой собственный хук useOutsideClick, который можно использовать для закрытия интерактивных элементов при клике вне их области.
Хуки или hooks — это специальная функциональность в React, которая позволяет использовать state и другие возможности React внутри функциональных компонентов. Как правило, общий стейт React определяется в компонентах и передается в каждый дочерний компонент через пропсы. Однако, хуки позволяют использовать state и otrasную функциональность без необходимости выполнения этих действий через пропсы, что упрощает процесс разработки.
Как мы можем использовать кастомные хуки?
React предоставляет несколько хуков, которые используются для различных целей, например, useState для управления состоянием или useEffect для внедрения выполняемых на клиенте действий. Однако, React также позволяет создавать собственные хуки, которые можно использовать вместе с другим компонентом. Мы создадим свой кастомный хук, который будет использоваться для закрытия окна при клике вне его области.
Первым шагом является создание кастомного хука, который будет использоваться для определения клика за пределами определенной области. Мы будем использовать useRef для создания ссылки на элемент, который должен проверяться при клике вне его области.
import { useState, useEffect, useRef } from 'react';
const useOutsideClick = (initialValue) => {
const [isActive, setIsActive] = useState(initialValue);
const ref = useRef(null);
const handleClick = (e) => {
if (ref.current && !ref.current.contains(e.target)) {
setIsActive(!isActive);
}
};
useEffect(() => {
document.addEventListener("click", handleClick);
return () => {
document.removeEventListener("click", handleClick);
};
});
return { ref, isActive, setIsActive };
};
export default useOutsideClick;
В коде выше мы создали хук useOutsideClick, который принимает начальное значение initialValue. Хук создает state isActive, который отслеживает текущее состояние активности, а также ref для ссылки на элемент, а также setIsActive для изменения состояния активности. Мы также создали функцию handleClick, которая проверяет, кликнул ли пользователь за пределами элемента ref. И если клик был выполнен вне области, то изменяется isActive.
Хук также использует useEffect, чтобы удалить слушателя событий, когда компонент размонтирован.
Применение нашего хука useOutsideClick
После создания нашего хука, мы можем использовать его в любом компоненте, где нужно обнаружить клик внутри или за пределами элемента. Мы можем использовать полученный объект, вернувшийся функциейхука, и использовать его в соответствии с потребностями нашего компонента.
import useOutsideClick from './useOutsideClick';
function SomeComponent() {
const { ref, isActive, setIsActive } = useOutsideClick(false);
const handleButtonClick = () => {
setIsActive(!isActive);
};
return (
<div>
<button onClick={handleButtonClick}>Toggle visibility</button>
{isActive && (
<div ref={ref}>
Here is some content. Clicking outside of this content will close it.
</div>
)}
</div>
);
}
Мы использовали хук useOutsideClick внутри компонента SomeComponent. В этом компоненте мы создали элемент кнопки, который является отправной точкой для изменения состояния isActive. Каждый раз, когда мы кликаем на кнопку, isActive будет изменяться, и определенная область, которую мы определили с помощью ссылки на ref, будет спрятана или показана. Хук useOutsideClick помогает нам закрыть область, если вызов клика осуществляется не на определенной области.
Мы реализовали кастомный хук useOutsideClick, который может быть использован для закрытия любого интерактивного элемента при клике вне его области. Мы использовали useRef, useState, и useEffect хуки из React библиотеки, чтобы создать хук, который легко использовать в любом компоненте React.