useOutsideClick

اجرای یک handler هنگام کلیک خارج از یک المان — برای بستن منو، popover و کارت‌ها

معرفی

هوک useOutsideClick هر بار که یک رویدادِ pointer خارج از المانِ ارجاع‌شده رخ دهد، handler را صدا می‌زند. برای بستنِ dropdown، popover، کارت‌های قابل‌بستن و مشابه.

به‌صورت پیش‌فرض به mousedown گوش می‌دهد (نه click) تا منو پیش از اجرای هر کلیکِ داخلی بسته شود — همان رفتارِ Radix.

چه زمانی استفاده کنیم

بستنِ یک منوی سفارشی یا popover با کلیکِ بیرون
رد کردنِ یک کارتِ انتخاب‌شده هنگام کلیک در جای دیگر

چه زمانی استفاده نکنیم

اگر از کامپوننت‌های مبتنی بر Radix (Dialog، Popover، DropdownMenu) استفاده می‌کنید — خودشان این رفتار را دارند

استفاده

import { useOutsideClick } from '@partodata/ui'

function Menu() {
  const [open, setOpen] = React.useState(false)
  const ref = React.useRef<HTMLDivElement>(null)

  useOutsideClick(ref, () => setOpen(false), { when: open })

  return (
    <div ref={ref}>
      <Button onClick={() => setOpen((o) => !o)}>منو</Button>
      {open && <div data-slot="menu">…</div>}
    </div>
  )
}

پارامترها

پارامتر	نوع	پیش‌فرض	توضیح
`ref`	`RefObject<T \| null>`	—	المانِ داخلی؛ کلیک روی آن یا فرزندانش نادیده گرفته می‌شود
`handler`	`(e: MouseEvent \| TouchEvent) => void`	—	هنگام کلیکِ بیرون صدا زده می‌شود
`options.when`	`boolean`	`true`	با `false` گوش‌دادن متوقف می‌شود (مثلاً وقتی منو بسته است)
`options.events`	`Array<'mousedown' \| 'click' \| …>`	`['mousedown','touchstart']`	رویدادهایی که گوش داده می‌شوند

مقدار بازگشتی

این هوک چیزی برنمی‌گرداند (void).

هوک‌های مرتبط

منو/پاپ‌اوورِ آماده و دسترس‌پذیر → DropdownMenu · Popover