useComponentVisible.md

React custom hook to show/hide content based on outside click

import React, { useState, useEffect, useRef } from 'react'

export const useComponentVisible = (isVisible = false) => {
  	// ref of elem for which you want to detect outside click
	const ref = useRef(null)
	const [isComponentVisible, setIsComponentVisible] = useState(isVisible)

	useEffect(() => {
		const handleClickOutside = (e) => {
			if (ref.current && !ref.current.contains(e.target) && isComponentVisible) {
				setIsComponentVisible(false)
			}
		}

		document.addEventListener('click', handleClickOutside, true)
		// cleanup
		return () => {
			document.removeEventListener('click', handleClickOutside, true)
		}
	}, [isComponentVisible])

	return { ref, isComponentVisible, setIsComponentVisible }
}