useOutsideClickEffect

useOutsideClickEffect は、指定したコンテナーの外側でクリックイベントが発生したときにコールバックを実行する React フックです。 外側のクリックでモーダル、ドロップダウン、ツールチップなどの UI コンポーネントを閉じる場合に役立ちます。

インターフェース

function useOutsideClickEffect(
  container: HTMLElement | (HTMLElement | null)[] | null,
  callback: () => void
): void;

パラメータ

• containerrequired · HTMLElement | (HTMLElement | null)[] | null
  

  単一の HTML 要素、HTML 要素や null を含む配列、または null です。配列内の null は無視されます。HTML 要素が一つも残らない場合、コールバックは実行されません。

• callbackrequired · () => void
  

  指定したコンテナーの外側がクリックされたときに実行する関数です。

戻り値

この関数は値を返しません。

使用例

import { useOutsideClickEffect } from 'react-simplikit';
import { useState } from 'react';

function Example() {
  const [wrapperEl, setWrapperEl] = useState<HTMLDivElement | null>(null);

  useOutsideClickEffect(wrapperEl, () => {
    console.log('Outside clicked!');
  });

  return <div ref={setWrapperEl}>Content</div>;
}