Create ts-react-elementref.md

petermekhaeil · Jan 3, 2024 · b595d57 · b595d57
1 parent b24ab1d
commit b595d57
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/learnings/ts-react-elementref.md b/learnings/ts-react-elementref.md
@@ -0,0 +1,16 @@
+# TypeScript: ElementRef for React.useRef
+
+You can extract the type from a `useRef` hook using `ElementRef`:
+
+```tsx
+import { useRef, ElementRef } from "react";
+
+const Component = () => {
+  const audioRef = useRef<ElementRef<"audio">>(null);
+//       ^? React.RefObject<HTMLAudioElement>
+
+  return <audio ref={audioRef}>Hello</audio>;
+};
+```
+
+Read [Matt Pocock's Strongly Type useRef with ElementRef](https://www.totaltypescript.com/strongly-type-useref-with-elementref).