Type definitions of container are returning an error on any implementation (even example)

[lkomar]

Implementing the hook even exactly as in example gives the following typescript error

Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.ts(2322)

The output gets even more complicated when pairing it up with styled-components' elements, but translates roughly to the same problem

No overload matches this call.
  Overload 1 of 2, '(props: Pick<Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | ... 252 more ... | "key"> & { ...; }, "ref" | ... 254 more ... | "key"> & Partial<...>, "ref" | ... 254 more ... | "key"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'RefObject<HTMLElement>' is not assignable to type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
      Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
        Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"div", any, {}, never>): ReactElement<StyledComponentPropsWithAs<"div", any, {}, never>, string | ... 1 more ... | (new (props: any) => Component<...>)>', gave the following error.
    Type 'RefObject<HTMLElement>' is not assignable to type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
      Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.ts(2769)

[lkomar]

Ok, so first things first. If you use HTMLDivElement it workes just fine.

I've made an upgrade by adding a little generic aspect to the typescript you've got there when I adapted your solution.

try something like that

const useClickOutside = <T extends HTMLElement>(callback: EventListener) => {
  const container = useRef<T>(null);

then just use it according to your needs

const outsideDivRef = useClickOutside<HTMLDivElement>(() => console.log('clicked'));

I rewrote that into arrow functions, but you get the general idea. Also thanks for what you did so far, it was really helpful.