[BUG] useEventListener usage example produces TypeScript error

Author: mayatronCreated Mar 18, 2025Updated May 12, 2025
Labelsbug

Describe the bug

The example usage for useEventListener produces a TypeScript error on the following line:

typescript
// example with element based event
useEventListener("click", onClick, buttonRef);
src/app/Usage.tsx:32:38 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'RefObject<HTMLButtonElement | null>' is not assignable to parameter of type 'RefObject<Document>'.
      Type 'HTMLButtonElement | null' is not assignable to type 'Document'.
        Type 'null' is not assignable to type 'Document'.

32   useEventListener("click", onClick, buttonRef);
                                        ~~~~~~~~~

  node_modules/usehooks-ts/dist/index.d.ts:335:18
    335 declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
                         ~~~~~~~~~~~~~~~~
    The last overload is declared here.

To Reproduce

  1. npx create-next-app@latest test-hooks --yes
  2. copy/paste usage example into new component src/app/Usage.tsx
  3. tsc --noEmit

Expected behavior

I expect the usage example to be free of TypeScript errors.

Additional context

No response