Add new option for generic forwardRefs (#710)

* Add new option for generic forwardRefs * update README * format
typescript-cheatsheets · Mar 27, 2024 · 09217c9 · 09217c9
1 parent 4d6be66
commit 09217c9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1730,6 +1730,22 @@ function ClickableListInner<T>(
 export const ClickableList = forwardRef(ClickableListInner);
 ```
 
+##### Option 3 - Call signature
+
+```ts
+// Add to `index.d.ts`
+interface ForwardRefWithGenerics extends React.FC<WithForwardRefProps<Option>> {
+  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
+    React.FC<WithForwardRefProps<T>>
+  >;
+}
+
+export const ClickableListWithForwardRef: ForwardRefWithGenerics =
+  forwardRef(ClickableList);
+```
+
+Credits: https://stackoverflow.com/a/73795494
+
 #### More Info
 
 - https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315

diff --git a/docs/basic/getting-started/forward-create-ref.md b/docs/basic/getting-started/forward-create-ref.md
@@ -129,6 +129,22 @@ function ClickableListInner<T>(
 export const ClickableList = forwardRef(ClickableListInner);
 ```
 
+### Option 3 - Call signature
+
+```ts
+// Add to `index.d.ts`
+interface ForwardRefWithGenerics extends React.FC<WithForwardRefProps<Option>> {
+  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<
+    React.FC<WithForwardRefProps<T>>
+  >;
+}
+
+export const ClickableListWithForwardRef: ForwardRefWithGenerics =
+  forwardRef(ClickableList);
+```
+
+Credits: https://stackoverflow.com/a/73795494
+
 ## More Info
 
 - https://medium.com/@martin_hotell/react-refs-with-typescript-a32d56c4d315