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 要素のクリック外側(例えば、ドロップダウンメニューの場合はメニューの外側)がクリックされたときに、渡されたコールバック関数を呼び出すことができます。