EN
React - forward ref in TypeScript
1
points
In this short article we would like to show how to forward ref property in React. Presented solution uses TSX (React Syntax Extension to TypeScript).
Checkbox.tsx file:
import MaterialCheckbox from '@material-ui/core/Checkbox';
import React, { FocusEventHandler, forwardRef, Ref } from 'react';
type Props = {
name?: string;
checked?: boolean;
onFocus?: FocusEventHandler<HTMLButtonElement>;
onBlur?: FocusEventHandler<HTMLButtonElement>;
};
const Checkbox = (
{ name, checked, onFocus, onBlur }: Props,
ref: Ref<HTMLButtonElement>
) => {
return (
<MaterialCheckbox
ref={ref}
name={name}
checked={checked}
onFocus={onFocus}
onBlur={onBlur}
/>
);
};
export default forwardRef(Checkbox);