/
eermolov
/
ui-kit-ce
Обзор
Документация
Войти
/
eermolov
/
ui-kit-ce
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
packages/hooks/src/useOutsideClick/useOutsideClick.ts
40 строк
1 KB
Denis Svyatovets
v1.10.0
27 мар 2024, 13:48
27 мар 2024, 13:48
c9029ae
Код
Авторство
О чём код?
'use client' import { useCallback, useRef } from 'react' /** * Обработка события клика за пределами переданных элементов. * targets - это элементы, за пределами которых необходимо отслеживать событие 'click'. */ export const useOutsideClick = <Ref extends HTMLElement>( handler: (e?: Event) => void ): ((node: Ref | null) => void) => { const ref = useRef<Ref | null>(null) const handleMouseDown = useCallback( (e: Event) => { // Если клик происходит за пределами целевого элемента, вызвать обработчик if (!ref.current?.contains(e.target as Node)) { handler(e) } }, [handler] ) const callbackRef = useCallback<(node: Ref | null) => void>( (node) => { if (ref.current) { document.removeEventListener('mousedown', handleMouseDown, true) } ref.current = node if (ref.current) { document.addEventListener('mousedown', handleMouseDown, true) } }, [handleMouseDown] ) return callbackRef }