Add new option for generic forwardRefs (#710)

yangshun · web-flow · commit 09217c90d60b · 2024-03-27T09:48:04.000+01:00
* Add new option for generic forwardRefs

* update README

* format
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
