[BUG] useOnClickOutside doesn't allow null ref

[OskarD]

Describe the bug

The sample code in https://usehooks-ts.com/react-hook/use-on-click-outside#usage throws a TypeError:

Argument of type 'RefObject<HTMLDivElement | null>' is not assignable to parameter of type 'RefObject<HTMLElement> | RefObject<HTMLElement>[]'.
  Type 'RefObject<HTMLDivElement | null>' is not assignable to type 'RefObject<HTMLElement>'.
    Type 'HTMLDivElement | null' is not assignable to type 'HTMLElement'.
      Type 'null' is not assignable to type 'HTMLElement'.ts(2345)

To Reproduce

  const ref = useRef(null)

  const handleClickOutside = () => {
    // Your custom logic here
    console.log('clicked outside')
  }

  const handleClickInside = () => {
    // Your custom logic here
    console.log('clicked inside')
  }

  useOnClickOutside(ref, handleClickOutside)

Expected behavior

Should accept null

Additional context

No response

[Xevion]

Yeah, just hit this while updating dependencies. It started erroring before I updated from 2.9.1 to 3.1.0, though; so I don't think this is a mere regression.

Regardless, what's the intended fix here? Kinda frustrated.

[arsinclair]

Before a fix is available you can override the types like so:

useOnClickOutside<HTMLUListElement>(ref as React.RefObject<HTMLUListElement>, () => setIsOpen(false));

although, I am not endorsing it.

[macutko]

Im hitting the same error with useResizeObserver . Is this potentially related? I hit this error when updating to react v19.

[rik-iso]

useHover also affected. I've added a usehooks.d.ts:

import 'usehooks-ts'

  // React 19 issue: https://github.com/juliencrn/usehooks-ts/issues/663
declare module 'usehooks-ts' {
  declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(
    ref: RefObject<T | null | undefined> | RefObject<T | null | undefined>[],
    handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
    eventType?: EventType,
    eventListenerOptions?: AddEventListenerOptions
  ): void

  declare function useHover<T extends HTMLElement = HTMLElement>(elementRef: RefObject<T | null | undefined>): boolean;
}