Languages
[Edit]
EN

React - forward ref in TypeScript

1 points
Created by:
Root-ssh
121020

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);

ReactJS

React - forward ref in TypeScript
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join