useClickedOutside.ts25 lines · main

1	import { useEffect, useState } from 'react'
2
3	/**
4	* Hook that alerts clicks outside of the passed ref
5	*/
6	export const useClickedOutside = (ref: any) => {
7	const [active, setActive] = useState<boolean>(false)
8
9	useEffect(() => {
10	const handleClickOutside = (event: any) => {
11	if (ref.current && !ref.current.contains(event.target)) {
12	setActive(true)
13	} else {
14	setActive(false)
15	}
16	}
17
18	document.addEventListener('mousedown', handleClickOutside)
19	return () => {
20	document.removeEventListener('mousedown', handleClickOutside)
21	}
22	}, [ref])
23
24	return active
25	}