useEventListener#

import { useRef, useState } from 'react'
import { useEventListener } from '@react-hooks-library/core'

export function Demo() {
  const buttonRef = useRef<HTMLButtonElement | null>(null)
  const [clickCount, setClickCount] = useState(0)
  const [lastClicked, setLastClicked] = useState('null')

  useEventListener('keyup', (ev) => {
    setLastClicked(ev.key)
  })

  useEventListener(buttonRef, 'click', () => {
    setClickCount((c) => c + 1)
  })

  return (
    <div>
      <button ref={buttonRef}>Button Clicked {clickCount} times!</button>
      <div>
        <div>Click any button</div>
        <div>Last clicked: {lastClicked}</div>
      </div>
    </div>
  )
}

/**
 * Register listener using addEventListener when mounting, and removeEventListener automatically when un-mounting.
 *
 * Returns a cleanup function manually if you want to remove the listener manually.
 *
 * Overload 1: Omitted Window target
 *
 * @see https://react-hooks-library.vercel.app/core/useEventListener
 * @param event
 * @param listener
 * @param options
 * @returns Clean up function for manual cleanup
 */
declare function useEventListener<E extends keyof WindowEventMap>(
  event: E,
  listener: (this: Window, ev: WindowEventMap[E]) => any,
  options?: boolean | AddEventListenerOptions
): Fn

/**
 * Register listener using addEventListener when mounting, and removeEventListener automatically when un-mounting.
 *
 * Returns a cleanup function manually if you want to remove the listener manually.
 *
 * Overload 2: Explicitly Window target
 *
 * @see https://react-hooks-library.vercel.app/core/useEventListener
 * @param target
 * @param event
 * @param listener
 * @param options
 * @returns Clean up function for manual cleanup
 */
declare function useEventListener<E extends keyof WindowEventMap>(
  target: Window,
  event: E,
  listener: (this: Window, ev: WindowEventMap[E]) => any,
  options?: boolean | AddEventListenerOptions
): Fn

/**
 * Register listener using addEventListener when mounting, and removeEventListener automatically when un-mounting.
 *
 * Returns a cleanup function manually if you want to remove the listener manually.
 *
 * Overload 3: Explicitly Document target
 *
 * @see https://react-hooks-library.vercel.app/core/useEventListener
 * @param target
 * @param event
 * @param listener
 * @param options
 * @returns Clean up function for manual cleanup
 */
declare function useEventListener<E extends keyof DocumentEventMap>(
  target: Document,
  event: E,
  listener: (this: Document, ev: DocumentEventMap[E]) => any,
  options?: boolean | AddEventListenerOptions
): Fn

/**
 * Register listener using addEventListener when mounting, and removeEventListener automatically when un-mounting.
 *
 * Returns a cleanup function manually if you want to remove the listener manually.
 *
 * Overload 4: Custom event target with event type infer
 *
 * @see https://react-hooks-library.vercel.app/core/useEventListener
 * @param target
 * @param event
 * @param listener
 * @param options
 * @returns Clean up function for manual cleanup
 */
declare function useEventListener<Names extends string, EventType = Event>(
  target: InferEventTarget<Names>,
  event: Names,
  listener: GeneralEventListener<EventType>,
  options?: boolean | AddEventListenerOptions
): Fn

/**
 * Register listener using addEventListener when mounting, and removeEventListener automatically when un-mounting.
 *
 * Returns a cleanup function manually if you want to remove the listener manually.
 *
 * Overload 5: Custom event target fallback
 *
 * @see https://react-hooks-library.vercel.app/core/useEventListener
 * @param target
 * @param event
 * @param listener
 * @param options
 * @returns Clean up function for manual cleanup
 */
declare function useEventListener<EventType = Event>(
  target: MaybeRef<EventTarget | null | undefined>,
  event: string,
  listener: GeneralEventListener<EventType>,
  options?: boolean | AddEventListenerOptions
): Fn