React typescript how to use useRef as prop

react useref typescript
react hooks
react forwardref
react use memo
uselayouteffect
typescript react ref object is possibly null
usereducer typescript
usestate typescript array

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

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

React typescript how to use useRef as prop, change to: const Input: React.FC<InputProps> = React.forwardRef((inputProps, ref) => { return( <input className="px-2 py-1 text-gray-700� The createRef function was introduced in React version 16.3. So, when using a previous version, a different technique needs to be used to access a ref. In the previous examples, the ref prop has been set to an instance of RefObject but it can also be set to a callback method that accepts a parameter of the DOM element. This callback can then be

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) => {

TypeScript and React: Hooks, The value of the ref can be updated by setting it using the ref prop on a React element. The TypeScript definition for useRef is the following:� I’ve imported the React useRef, and useLayoutEffect tooling. If you’re not familiar with React useLayoutEffect, I recommend you go read a previous article to learn more about it, “When to use React useRef and useLayoutEffect vs useEffect.” I then initiated a useRef hook and added an open and close (<>) bracket before the parenthesis.

Try one of this:

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

useTypescript — A Complete Guide to React Hooks and TypeScript , This guide will show how to use strongly typed refs using Typescript. We will To use refs in a functional component, we create the ref using the useRef hook: The ref is set when the element is declared using the ref prop:. const buttonRef = React.useRef(); return ( <Button ref={buttonRef}> A button </Button> ); How to use forwardRef with TypeScript I always screw this up, so I hope by writing this article I can help both you and me to figure this out.

Using React Refs in Typescript, (if applicable) How to use typescript and useRef What's your issue or If you're using a ref object to pass into a ref prop for an element, you� Since React 16.3 the way to add refs is to use React.createRef as Jeff Bowen pointed in his answer. However you can take advantage of Typescript to better type your ref. In your example you're using ref on input element.

typescript-cheatsheets/react-typescript-cheatsheet, tsx import React, { useEffect, useRef} from 'react'; interface Props { } const AdvancedHooksComponent: React.FC<Props> = () => { const inputRef = useRef <� Having spent the last few months developing React applications and libraries using Typescript, I thought I’d share some of the things I’ve learned along the way. These are the patterns I use with Typescript and React about 80% of the time.

React Hooks with Typescript : UseCallback, UseMemo, UseContext , The useRef hook has been implemented as a solution to use React refs within we have all become accustomed to (using this with class properties, etc). In my experience, Typescript also seems to complement class� React Navigation is written with TypeScript and exports type definitions for TypeScript projects. #Type checking the navigator To type check our route name and params, the first thing we need to do is to create an object type with mappings for route name to the params of the route.

Comments
  • Yes, I do there is this error const Input: React.FunctionComponent<InputProps> Type 'ForwardRefExoticComponent<Pick<InputProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | ... 269 more ... | "onTransitionEndCapture"> & RefAttributes<...>>' is not assignable to type 'FunctionComponent<InputProps>'. Types of property 'defaultProps' are incompatible. Type 'Partial<Pick<InputProps, "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" |
  • This error in your code or my demo ? if in your code then need you make a simple codesandbox demo to review
  • It is in both :(
  • 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
  • Put the mouse over row number 13 to see the error const Input: React.FC
  • Type 'Ref<HTMLElement>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'. Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'. Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLInputElement>'.
  • I've got (JSX attribute) React.ClassAttributes<HTMLInputElement>.ref?: string | ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined Type 'Ref<HTMLElement>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'. Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined'. Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLInputElement>'.
  • Type it as an input element HTMLInputElement.