tanem / react-svg

:art: A React component that injects SVG into the DOM.

Home Page:https://npm.im/react-svg

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ForwardedRef not assignable to ref type

jeremy-flusin opened this issue · comments

Issue description

Hi there,

When trying to use a forwarded ref with the component, I encountered the following TypeScript error:

TS2769: No overload matches this call.

Overload  1  of  2 ,  (props: Props | Readonly<Props>): ReactSVG , gave the following error.
Type  ForwardedRef<HTMLDivElement>  is not assignable to type
((string | ((instance: ReactSVG | null) => void) | RefObject<ReactSVG>) & ((string | ((instance: HTMLWrapperType | null) => void) | RefObject<...>) & (string | ... 1 more ... | RefObject<...>))) | null | undefined

Overload  2  of  2 ,  (props: Props, context: any): ReactSVG , gave the following error.
Type  ForwardedRef<HTMLDivElement>  is not assignable to type
((string | ((instance: ReactSVG | null) => void) | RefObject<ReactSVG>) & ((string | ((instance: HTMLWrapperType | null) => void) | RefObject<...>) & (string | ... 1 more ... | RefObject<...>))) | null | undefined

Reproducer

I've created a CodeSandbox demonstrating the issue.

Attemped workaround

I tried to change the ForwardedRef type to HTMLDivElement, HTMLSpanElement or SVGSVGElement with no success.
With type assertion ref={ref as any} compilation works fine, and the runtime behaviour is as expected.

Thank you for your time and attention to this matter.