Skip to content

[BUG] useEventListener usage example produces TypeScript error #682

@mayatron

Description

@mayatron

Describe the bug

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

// 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions