Languages
[Edit]
EN

React - forward ref in TypeScript

1 points
Created by:
Root-ssh
76580

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);
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join