useClickOutside

概览

useClickOutside 监听 document 上的 pointerdown 事件，仅当事件发生在 ref 所指元素之外时才调用处理函数。

函数签名

function useClickOutside<T extends HTMLElement>(
  ref: { readonly current: T | null },
  onOutside: (event: PointerEvent) => void,
  enabledOrOptions?: boolean | { enabled?: boolean; onError?: (error: unknown) => void },
): void;

参数

ref 指定内部区域；onOutside 始终使用最近一次已提交的回调。传入布尔值可以直接启用或禁用监听器；对象形式支持 enabled 和 onError 观察器，enabled 默认为 true。

返回值

无返回值；document 监听器的建立与清理由 Hook 管理。

行为

非 Node 类型的事件目标会被忽略。引用元素尚不存在时，事件不会被视为外部点击；禁用 Hook 或卸载组件都会移除监听器。onOutside 抛错时，会先调用 onError，再重新抛出原始错误。

SSR / RSC

document 不可用时，Effect 不会执行任何操作。请仅在 Client Component 中调用。

示例

组合使用

用 useBoolean 管理打开状态，并把稳定的 setFalse 直接作为处理函数。

源码

在 GitHub 查看实现。