EN
React - forwardRef with generic component in TypeScript
5 points
In this short article, we would like to show how to forward reference to the generic components in React using TypeScript.
Quick solution:
xxxxxxxxxx1
const MyForm = forwardRef(2
<T extends unknown> (props: Props<T>, ref: Ref<HTMLFormElement>) => {3
// some component body here ...4
}5
);6
7
export default MyForm as <T extends unknown> (props: Props<T> & { ref: Ref<HTMLFormElement> }) => JSX.Element;
MyForm.tsx file:
xxxxxxxxxx1
import React, { FormEvent, forwardRef, ReactNode, Ref } from 'react';2
3
type Props<T extends unknown> = {4
data: T;5
children: ReactNode;6
onSubmit: (data: T) => void;7
};8
9
const MyForm = forwardRef(10
<T extends unknown>({ data, children, onSubmit }: Props<T>, ref: Ref<HTMLFormElement>) => {11
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {12
// onSubmit(...);13
};14
// some code here ...15
return (16
<form ref={ref} onSubmit={handleSubmit}>17
{children}18
</form>19
);20
}21
);22
23
export default MyForm as <T extends unknown>(props: Props<T> & { ref: Ref<HTMLFormElement> }) => JSX.Element;App.tsx file:
xxxxxxxxxx1
import React, { useRef } from 'react';2
import MyForm from './MyForm';3
4
const App = () => {5
const formRef = useRef<HTMLFormElement>(null);6
const handleSubmit = (data: number) => console.log(data);7
return (8
<MyForm<number> ref={formRef} data={5} onSubmit={handleSubmit}>9
{/* some code here ... */}10
</MyForm>11
);12
};13
14
export default App;
