Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React 19 "ref as prop" and TypeScript

React 19 introduces a new alternative to the existing forwardRef that is called ref as prop:

https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop

But unfortunately the example provided in the blog post is written in JavaScript, not TypeScript::

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

So in TypeScript, what is the correct type the ref prop?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It seems React.RefObject is not correct. I have no error with React.Ref:

    import type {Ref} from 'react'

function MyInput({placeholder, ref}: {placeholder?: string; ref?: Ref<HTMLInputElement>}) {
  return <input placeholder={placeholder} ref={ref} />
}

    function MyComponent() {
  const ref = useRef<HTMLInputElement>(null)
  return <MyInput ref={ref} /> // OK
}

    Don't forget mark it as optional (ref?: Ref<...>).

    In more complex situations —such as my real case where I used @lexical/[email protected], which appears to not completely compatible with React 19— I wrote the ref like this:

    function RichTextEditor({ref}: {ref?: Ref<LexicalEditor>}) {
  // ...
  return (
    // ...
      <EditorRefPlugin
        editorRef={(editorRef) => {
          if (!ref) return
          if (typeof ref === 'function') ref(editorRef)
          else ref.current = editorRef
        }}
      />
    // ...
  )
}

  2. 0

    Use React.RefObject:

    function MyInput({placeholder, ref}: {
  placeholder: string;
  ref: React.RefObject<HTMLInputElement>;
}) {
  return <input placeholder={placeholder} ref={ref} />
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search