

Attach typed event listeners to window, document, media query lists, or element refs.

## Usage [#usage]

```tsx
import { useEventListener } from "@tilt-legal/cubitt-components/utilities/hooks";
import { useRef } from "react";

const buttonRef = useRef<HTMLButtonElement>(null);

useEventListener("resize", () => {
  // handle viewport resize
});

useEventListener(
  "click",
  () => {
    // handle button click
  },
  buttonRef
);
```

## API [#api]

### Signature [#signature]

```ts
declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: boolean | AddEventListenerOptions): void;
declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
declare function useEventListener<K extends keyof HTMLElementEventMap & keyof SVGElementEventMap, T extends Element = K extends keyof HTMLElementEventMap ? HTMLDivElement : SVGElement>(eventName: K, handler: ((event: HTMLElementEventMap[K]) => void) | ((event: SVGElementEventMap[K]) => void), element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
```

### Parameters [#parameters]

This hook takes no arguments.

### Return Value [#return-value]

| Value    | Type   | Description                 |
| -------- | ------ | --------------------------- |
| `return` | `void` | Value returned by the hook. |
