ハローワールド。

タイトル通りの内容です。

Vuetify^[1]ではClick Outsideとして機能があるので、Reactでも似たような感じでできないものかと作りました。

結論

次のようなHook(?)を作ります。

import React, { useEffect } from 'react'; export function useOutsideClickDetector( ref: React.RefObject<Node>, handler: (event: MouseEvent) => void ) { useEffect(() => { function handleClickOutside(event: MouseEvent) { if (ref.current && !ref.current.contains(event.target as Node)) { handler(event); } } document.addEventListener('click', handleClickOutside); return () => { document.removeEventListener('click', handleClickOutside); }; }, [ref]); }

使い方

---

1. https://vuetifyjs.com/ja/ Vueのコンポーネントフレームワーク ↩︎