The Node.js® Website
keii.dev
1import type { RefObject } from 'react';
2import { useEffect } from 'react';
3
4const useClickOutside = <T extends HTMLElement>(
5 ref: RefObject<T>,
6 fn: () => void
7) => {
8 useEffect(() => {
9 const element = ref?.current;
10 const handleClickOutside = (event: Event) => {
11 if (element && !element.contains(event.target as Node)) {
12 fn();
13 }
14 };
15 document.addEventListener('click', handleClickOutside);
16 return () => document.removeEventListener('click', handleClickOutside);
17 }, [ref, fn]);
18};
19
20export default useClickOutside;