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