Example throws errors in create-react-app typescript template

[harrisonturton]

Hello!

This looks like an incredibly useful little package, but I can't seem to get it working.

I ran npx create-react-app use-multiple-refs --template typescript projects and tried the example. Specifically this:

import React, { useEffect } from "react";
import useDynamicRefs from "use-dynamic-refs";

const App: React.FC = () => {

	const [ getRef, setRef ] = useDynamicRefs();

	return (
		<>
			<input type="text" placeholder="Write..." ref={setRef("input")}/>
		</>
	);
};

export default App;

And I get these errors:

/Users/.../Documents/dev/multi-refs/src/App.tsx
TypeScript error in /Users/.../Documents/dev/multi-refs/src/App.tsx(10,46):
Type 'void | RefObject<unknown>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.
  Type 'void' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'.  TS2322

      8 | 	return (
      9 | 		<>
 > 10 | 			<input type="text" placeholder="Write..." ref={setRef("input")}/>
         | 			                                                                    ^
     11 | 		</>
     12 | 	);
     13 | };

Are there type annotations I'm missing? I had a look in your source, but couldn't quite figure it out.

[fitzmode]

Hey there, I noticed this too this morning, I'll take a look and push an update ASAP

[sclavijo93]

Hi @fitzmode! is there any news about this?

[sclavijo93]

I'm working with React Native 0.63 and use-dynamic-refs 1.0.0

[marklude]

This should work, ref={setRef("input") as RefObject<HTMLInputElement>}

[arturmoroz]

ref={setRef("input") as RefObject<HTMLInputElement>} this works for me