UseClickOutside

1'use client';
2 
3import { useEffect, useRef } from 'react';
4 
5export function useClickOutside<T extends HTMLElement>(
6  ref: React.RefObject<T | null>,
7  onClickOutside: (event: MouseEvent | TouchEvent) => void,
8) {
9  const callbackRef = useRef(onClickOutside);
10  useEffect(() => {
11    callbackRef.current = onClickOutside;
12  }, [onClickOutside]);
13 
14  useEffect(() => {
15    function handleEvent(event: MouseEvent | TouchEvent) {
16      const el = ref.current;
17      if (!el || !(event.target instanceof Node) || el.contains(event.target))
18        return;
19      callbackRef.current(event);
20    }
21 
22    document.addEventListener('mousedown', handleEvent, true);
23    document.addEventListener('touchstart', handleEvent, true);
24    return () => {
25      document.removeEventListener('mousedown', handleEvent, true);
26      document.removeEventListener('touchstart', handleEvent, true);
27    };
28  }, []);
29}