【React】特定のコンポーネントの外側のタップを検出する

結論

下記のようにして、全体の要素のmousedownイベントを監視して、そのイベントの中のtargetRefに関するイベントのみ除外することで、特定の要素以外の場所がタップされたことを検知することができます👀

  const targetRef: React.RefObject<HTMLDivElement> = React.createRef()

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        targetRef.current &&
        !targetRef.current.contains(event.target as Node)
      ) {
        // Outside tapped!!
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [targetRef])

  return (
    <div ref={targetRef}>hoge</div>
  )