BFE.devでのAI解答例 - React コーディング問題
15. useClickOutside()

以下は、要素の外側がクリックされたときにコールバックを呼び出す useClickOutside() フックの実装例です。

import { useEffect, useRef } from 'react';function useClickOutside(callback) {  const ref = useRef();  useEffect(() => {    const handleClickOutside = event => {      if (ref.current && !ref.current.contains(event.target)) {        callback();      }    };    document.addEventListener('mousedown', handleClickOutside);    return () => {      document.removeEventListener('mousedown', handleClickOutside);    };  }, [callback]);  return ref;}export default useClickOutside;

このフックは、 useRef() フックを使用して、 ref 変数を作成し、コンポーネント内で使用している DOM 要素に割り当てます。 useEffect() フックを使用して、 document オブジェクト上の mousedown イベントをリッスンします。 ハンドラー関数では、クリックされた要素が参照している要素の外側にある場合にのみ、コールバック関数を呼び出します。 リッスンしているイベントを削除するために、 cleanup 関数を返します。最後に、 ref 変数を返します。

つまり、 useClickOutside() フックは、コンポーネントで参照されている DOM 要素のクリック外側(例えば、ドロップダウンメニューの場合はメニューの外側)がクリックされたときに、渡されたコールバック関数を呼び出すことができます。