{
  "name": "use-event-listener",
  "author": "Brendan Dash (https://shadcn-hooks.com)",
  "description": "A hook to attach event listeners to DOM elements, the window, or media query lists.",
  "registryDependencies": [
    "@shadcnhooks/use-latest",
    "@shadcnhooks/use-effect-with-target",
    "@shadcnhooks/create-effect-with-target"
  ],
  "files": [
    {
      "path": "registry/hooks/use-event-listener.ts",
      "content": "import { useEffectWithTarget } from '@/registry/hooks/use-effect-with-target'\nimport { useLatest } from '@/registry/hooks/use-latest'\nimport { getTargetElement } from '@/registry/lib/create-effect-with-target'\nimport type { BasicTarget } from '@/registry/lib/create-effect-with-target'\n\ntype noop = (...p: any) => void\n\nexport type Target = BasicTarget<HTMLElement | Element | Window | Document>\n\ninterface Options<T extends Target = Target> {\n  target?: T\n  capture?: boolean\n  once?: boolean\n  passive?: boolean\n  enable?: boolean\n}\n\nfunction useEventListener<K extends keyof HTMLElementEventMap>(\n  eventName: K,\n  handler: (ev: HTMLElementEventMap[K]) => void,\n  options?: Options<HTMLElement>,\n): void\nfunction useEventListener<K extends keyof ElementEventMap>(\n  eventName: K,\n  handler: (ev: ElementEventMap[K]) => void,\n  options?: Options<Element>,\n): void\nfunction useEventListener<K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (ev: DocumentEventMap[K]) => void,\n  options?: Options<Document>,\n): void\nfunction useEventListener<K extends keyof WindowEventMap>(\n  eventName: K,\n  handler: (ev: WindowEventMap[K]) => void,\n  options?: Options<Window>,\n): void\nfunction useEventListener(\n  eventName: string | string[],\n  handler: (event: Event) => void,\n  options?: Options<Window>,\n): void\nfunction useEventListener(\n  eventName: string | string[],\n  handler: noop,\n  options: Options,\n): void\n\nfunction useEventListener(\n  eventName: string | string[],\n  handler: noop,\n  options: Options = {},\n) {\n  const { enable = true } = options\n\n  const handlerRef = useLatest(handler)\n\n  useEffectWithTarget(\n    () => {\n      if (!enable) {\n        return\n      }\n\n      const targetElement = getTargetElement(options.target, window)\n      if (!targetElement?.addEventListener) {\n        return\n      }\n\n      const eventListener = (event: Event) => {\n        return handlerRef.current(event)\n      }\n\n      const eventNameArray = Array.isArray(eventName) ? eventName : [eventName]\n\n      eventNameArray.forEach((event) => {\n        targetElement.addEventListener(event, eventListener, {\n          capture: options.capture,\n          once: options.once,\n          passive: options.passive,\n        })\n      })\n\n      return () => {\n        eventNameArray.forEach((event) => {\n          targetElement.removeEventListener(event, eventListener, {\n            capture: options.capture,\n          })\n        })\n      }\n    },\n    [eventName, options.capture, options.once, options.passive, enable],\n    options.target,\n  )\n}\n\nexport { useEventListener }\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:hook"
}