From b595d57922fc543a3e08244424ccecdee93db0d4 Mon Sep 17 00:00:00 2001
From: Peter Mekhaeil <4616064+petermekhaeil@users.noreply.github.com>
Date: Wed, 3 Jan 2024 20:31:27 +0800
Subject: [PATCH] Create ts-react-elementref.md

---
 learnings/ts-react-elementref.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 learnings/ts-react-elementref.md

diff --git a/learnings/ts-react-elementref.md b/learnings/ts-react-elementref.md
new file mode 100644
index 0000000..0204eed
--- /dev/null
+++ 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).