{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-event-listener",
  "title": "UseEventListener",
  "description": "Manages DOM event listeners with proper cleanup.",
  "files": [
    {
      "path": "registry/hooks/use-event-listener.tsx",
      "content": "'use client';\n\nimport { RefObject, useEffect, useRef } from 'react';\n\n// Types\ntype EventTarget = Window | Document | HTMLElement | null;\n\ninterface Props<\n  K extends keyof WindowEventMap,\n  T extends HTMLElement = HTMLElement,\n> {\n  eventName: K;\n  handler: (event: WindowEventMap[K]) => void;\n  element?: RefObject<T | null> | EventTarget;\n  options?: boolean | AddEventListenerOptions;\n}\n\n/**\n * React hook for handling DOM event listeners with proper cleanup\n */\nexport function useEventListener<\n  K extends keyof WindowEventMap,\n  T extends HTMLElement = HTMLElement,\n>({ eventName, handler, element = window, options }: Props<K, T>): void {\n  // Create a ref that stores the handler\n  const savedHandler = useRef(handler);\n\n  // Update ref.current value if handler changes\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    // Define the element to attach the listener to\n    const targetElement: EventTarget =\n      element && 'current' in element ? element.current : element;\n\n    if (!(targetElement && targetElement.addEventListener)) {\n      return;\n    }\n\n    // Create event listener that calls handler function stored in ref\n    const eventListener: typeof handler = (event) =>\n      savedHandler.current(event);\n\n    targetElement.addEventListener(\n      eventName,\n      eventListener as EventListener,\n      options,\n    );\n\n    // Remove event listener on cleanup\n    return () => {\n      targetElement.removeEventListener(\n        eventName,\n        eventListener as EventListener,\n        options,\n      );\n    };\n  }, [eventName, element, options]);\n}\n",
      "type": "registry:hook",
      "target": "hooks/guarahooks/use-event-listener.tsx"
    }
  ],
  "categories": [
    "ui-and-dom"
  ],
  "type": "registry:hook"
}