React typescript how to use useRef as prop

Question

I'm just play around with typescript and I've got problem to use useRef in a custom element

passing it as prop

I've tried with

import React from "react";

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
    ref: HTMLElement | null
  }

const Input: React.FC<InputProps> = ({ ...inputProps }) => {
  return (
    <input
      className="px-2 py-1 text-gray-700 text-2xl bg-white border-2 border-gray-200 hover:border-purple-300 focus:outline-none focus:bg-white rounded-l-lg shadow-md"
      {...inputProps}
    />
  );
};
export default Input;


import React, { useRef } from "react";

import Input from "./input";
import Button from "./button";

const Form: React.FC = () => {
  const todoRef = useRef<HTMLElement | null>(null);
  return (
    <form onSubmit={}>
      <Input type="text" id="todo" ref={todoRef}/>
      <Button type="submit">+</Button>
    </form>
  );
};

export default Form;

What's the right way, please?

UPDATE

I worked out with: https://codesandbox.io/s/typescript-useref-example-e0hc4

JMadelaine · Accepted Answer · 2020-01-01 21:25:50Z

3

You need to use React.forwardRef on the component you are passing the ref to, like so:

const Input = React.forwardRef<HTMLElement, InputProps>(({ ...inputProps }, ref) => {
  return (
    <input
      ref={ref}
      className="px-2 py-1 text-gray-700 text-2xl bg-white border-2 border-gray-200 hover:border-purple-300 focus:outline-none focus:bg-white rounded-l-lg shadow-md"
      {...inputProps}
    />
  );
});

Refs are treated differently than normal props. They are not included in the props object. To expose a ref inside a custom component you have to use forwardRef. Once the ref is exposed inside your component, you should assign it to one of the components in your return statement (usually the top level component, input in this case).

UPDATE:

If you're seeing the error React.HTMLElement is not assignable to type React.HTMLInputElement you should change the type of ref that you're creating to the appropriate one:

const todoRef = useRef<HTMLInputElement | null>(null)

and in the input component change the first line to:

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ ...inputProps }, ref) => {

edited Jan 1, 2020 at 21:25

answered Jan 1, 2020 at 16:29

JMadelaine

2,9541 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3887366 Over a year ago

user3887366 Over a year ago

JMadelaine Over a year ago

Type it as an input element HTMLInputElement.

Babak Yaghoobi · Accepted Answer · 2020-01-01 17:22:30Z

1

change to:

const Input: React.FC<InputProps> = React.forwardRef((inputProps, ref) => {  
return(  
    <input
      className="px-2 py-1 text-gray-700 text-2xl bg-white border-2 border-gray-200 hover:border-purple-300 focus:outline-none focus:bg-white rounded-l-lg shadow-md"
      ref={ref}      
      {...inputProps}
    />
)
})
export default Input;

output here: https://codesandbox.io/s/typescript-useref-example-p3hh4

edited Jan 1, 2020 at 17:22

answered Jan 1, 2020 at 16:43

Babak Yaghoobi

1,99510 silver badges18 bronze badges

6 Comments

user3887366 Over a year ago

Babak Yaghoobi Over a year ago

This error in your code or my demo ? if in your code then need you make a simple codesandbox demo to review

user3887366 Over a year ago

It is in both :(

Babak Yaghoobi Over a year ago

I can't see any error in demo, in my sample when click on button then focus move to input, just for test, and work as correctly

user3887366 Over a year ago

Put the mouse over row number 13 to see the error const Input: React.FC

|

Adrian Pascu · Accepted Answer · 2020-01-01 16:37:25Z

-2

Try one of this:

Use HTMLInputElement instead of HTMLElement
<Input type="text" id="todo" ref={todoRef as any}/>
Wrap the HTMLElement type into a ReactElement generic type

answered Jan 1, 2020 at 16:37

Adrian Pascu

1,0497 gold badges25 silver badges54 bronze badges

Collectives™ on Stack Overflow

React typescript how to use useRef as prop

UPDATE

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

3 Answers 3

3 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related