What is the current way of defining the ref for an innerRef attribute using TypeScript?

See original GitHub issue

❓Question

Currently the innerRef has signature of (instance: any) => void which does not fit any type I can remind of, like FormikProps or FormikHelpers

Before that when I was using the 1.5 version where I could call methods like setFieldTouched on the ref therefore an inner Ref should be of type FormikHelper or at least inherit it. The (instance: any) => void looks broken

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:8
  • Comments:10

github_iconTop GitHub Comments

19reactions
Rubenvdabeelecommented, Jun 2, 2021

When using typed input:

const myRef = React.useRef<FormikProps<YourFormValueType>>(null);

return <Formik<YourFormValueType>
innerRef={myRef}
{...formikProps}
        />
6reactions
ProteanCodecommented, Feb 14, 2020

Since TypeScript is not really helpful i used as casting.

<Formik innerRef={instance=>{formikRef=instance}} {…otherProps}/>`

This however makes a non-constant formikRef variable

let formikRef = useRef(null) as any;

I do not think this is correct way with 2.x

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Refs with TypeScript - Medium
Refs provide a way to access DOM nodes or React elements created in the ... React will assign the current property with the...
Read more >
How to use refs in React with Typescript - Stack Overflow
When the component mounts, the ref attribute's current property will be assigned to the referenced component/DOM element and assigned back to ...
Read more >
Using React Refs in Typescript - Pluralsight
This code creates an instance of a RefObject that can take a ref of type HTMLDivElement ; the RefObject has a single property,...
Read more >
Forwarding Refs - React
When the ref is attached, ref.current will point to the <button> DOM node. Note. The second ref argument only exists when you define...
Read more >
How to use React's forwardRef function | Felix Gerschau
This tutorial will teach what all of that means and how to use the function, including the correct TypeScript definitions. What are refs...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found